Angular 提交部分表格

Angular 提交部分表格,angular,angular-reactive-forms,Angular,Angular Reactive Forms,我有一个很长的表格在一个有角度的4应用程序中。它分为四个部分。每个部分都允许用户保存他们的进度,稍后再回来完成。这意味着以这种方式保存进度时不需要任何字段。表格末尾有一个“提交申请”按钮。使用此按钮时,所有字段均为必填项。 我有4个独立的组件,每个部分一个,我的计划是分别提交每个部分,但这个新的要求改变了我的计划 我有一个这样的主要组成部分: <div class="animated fadeIn"> <app-form-1></app-form-1>

我有一个很长的表格在一个有角度的4应用程序中。它分为四个部分。每个部分都允许用户保存他们的进度,稍后再回来完成。这意味着以这种方式保存进度时不需要任何字段。表格末尾有一个“提交申请”按钮。使用此按钮时,所有字段均为必填项。 我有4个独立的组件,每个部分一个,我的计划是分别提交每个部分,但这个新的要求改变了我的计划

我有一个这样的主要组成部分:

<div class="animated fadeIn">
    <app-form-1></app-form-1>
    <app-form-2></app-form-2>
    <app-form-3></app-form-3>
    <app-form-4></app-form-4>
</div>
<form name="form" [formGroup]="form" (ngSubmit)="save()" novalidate>
    <div class="form-group row">
        <label for="field1" class="form-control-label col-md-4 text-md-right">
            Field 1:
        </label>
        <div class="col-md-8">
            <input type="text" formControlName="field1" class="form-control" placeholder="Field 1"
                [class.is-invalid]="isFieldInvalid('field1')">
        </div>
    </div>
</form>

每个子组件如下所示:

<div class="animated fadeIn">
    <app-form-1></app-form-1>
    <app-form-2></app-form-2>
    <app-form-3></app-form-3>
    <app-form-4></app-form-4>
</div>
<form name="form" [formGroup]="form" (ngSubmit)="save()" novalidate>
    <div class="form-group row">
        <label for="field1" class="form-control-label col-md-4 text-md-right">
            Field 1:
        </label>
        <div class="col-md-8">
            <input type="text" formControlName="field1" class="form-control" placeholder="Field 1"
                [class.is-invalid]="isFieldInvalid('field1')">
        </div>
    </div>
</form>

字段1:
因此,为了能够一起提交for部分,我猜我必须将表单移动到主组件,并将每个部分声明为该主组的一个formGroup。这样,我可以在单击“提交申请”时验证所有内容。但我现在必须能够保存每个子组件的进度。我可以假装使用一个常规按钮提交,该按钮接受当前值并将其发送到服务器,但这不会触发其他验证器,如validators.email和validators.pattern

是否有一种方法可以让部分表单提交使用反应式表单验证的所有优点,但也允许我从父组件提交