如何在提交之前检查单独组件上的所有表单组是否有效。 Angular 7，反应形式答案

【问题标题】：How to check if all form groups on separate components are valid before submitting. Angular 7, Reactive Forms如何在提交之前检查单独组件上的所有表单组是否有效。 Angular 7，反应形式
【发布时间】：2019-07-23 17:12:40
【问题描述】：

我们正在构建一个本质上是一个巨大形式的应用程序。有几个子组件、父组件和兄弟组件具有自己的表单组。在用户能够提交应用程序之前，每个组件中的所有表单组都必须有效。

如何在用户提交申请之前检查每个组件中的每个表单组是否有效。如果任何表单组包含无效字段，则用户必须无法提交申请。

我将展示一个示例，说明我们如何为同级组件设置表单组和一个“提交页面”组件，该组件应检查每个组件与表单组。

组件一TS文件：

export enum DemographicsSection {
  SECTION_ONE,
  SECTION_TWO,
}

demographicsSectionEnum = DemographicsSection;

  selectedSectionGroup = {
    sectionOne: false,
    sectionTwo: true,
  };

  // From Group.
  public demographicsSectionOne: FormGroup;
  public demographicsSectionTwo: FormGroup;

  ngOnInit() {
    this.initForm();
  }


  initForm() {
    // Section 1
    this.demographicsSectionOne = this.formBuilder.group({
      parentsCurrentMaritalStatus: ['', [Validators.required]],
      parentsNotSingleDate: ['', [Validators.required, 
      CustomValidators.pastMonthYearFormat]]
    });

    // Section 2
    this.demographicsSectionTwo = this.formBuilder.group({
      parentOneSsn: ['', [Validators.required, CustomValidators.numeric]],
      parentOneLastName: ['', [Validators.required, 
        CustomValidators.onlyAlphabet]],
    });
}

  get sectionOne() { return this.demographicsSectionOne.controls; }
  get sectionTwo() { return this.demographicsSectionTwo.controls; }

这是该组件的 HTML 的 sn-p：

 <div>
    <!-- parent-demographics-setiion-1 -->
    <div [hidden]="selectedSectionGroup.sectionOne" id=" 
{{demographicsSectionEnum.SECTION_ONE}}">
  <form [formGroup]="demographicsSectionOne">
        <label for="parent-demographics-section-1" class="col-lg-3 sr- 
        only">Parent Status</label>
        <select required formControlName="parentsCurrentMaritalStatus" 
        id="parentsCurrentMaritalStatus"
          class="form-control" data-hint="yes" 
   (change)="parentMaritalStatusChange(demographicsSectionFive
    ,$event.target.value)">
          <option selected="selected" value="">-- SELECT --</option>
          <option value="1">Married / Remarried</option>
          <option value="2">Never married</option>
        </select>
    </div>
  </form>
</div>


<div [hidden]="selectedSectionGroup.sectionTwo" id=" 
  {{demographicsSectionEnum.SECTION_TWO}}">
  <form [formGroup]="demographicsSectionTwo">
    <div [hidden]="sectionOne.parentsCurrentMaritalStatus.value === ''">
    <div class="form-group">
      <div class="col-lg-4">
        <label for="parent-demographics-section-2-1" class="col-lg-3 sr- 
        only">Parent 1 ITIN</label>
        <input formControlName="parentOneSsn" minlength=11 maxlength=11 
        id="parentOneSsn" type="text" class="form-control">
        <div *ngIf="sectionTwo.parentOneSsn.touched && 
        sectionTwo.parentOneSsn.invalid"
          class="alert text-danger m-0 p-0 col-md-12">
          Enter parent1 SSN or ITIN
        </div>
        </div>
      </div>
    </div>
  </form>
</div>

每个组件的设置方式相同。我们还没有开始提交申请，在我们尝试制定计划时，它基本上是空白的。

我们期望发生的情况是，如果任何其他组件表单组中的字段无效，则用户应该无法提交应用程序。如果所有组件的所有表单组上的所有字段都有效，则用户应该能够提交应用程序。

【问题讨论】：

标签： save submit angular7 angular-reactive-forms formgroups

【解决方案1】：

使用自定义验证器

这是指令： Angular Custom validators

【讨论】：