Angular反应性表单部分表单提交

Question

我在Angular 4应用程序中有很长的格式。它分为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>

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

有没有办法让我使用响应式表单验证的所有优点来进行部分表单提交，但又允许我也从父组件中提交？