Angular Reactive Form根据控件自动分组验证

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <div formGroupName="group1">
        <input formControlName="control1" placeholder="Control 1">
        <div *ngIf="myForm.get('group1.control1').invalid && myForm.get('group1.control1').touched">
          <div *ngIf="myForm.get('group1.control1').errors.required">Control 1 is required</div>
        </div>
      </div>
      <div formGroupName="group2">
        <input formControlName="control2" placeholder="Control 2">
        <div *ngIf="myForm.get('group2.control2').invalid && myForm.get('group2.control2').touched">
          <div *ngIf="myForm.get('group2.control2').errors.required">Control 2 is required</div>
        </div>
      </div>
    </form>
  `,
})
export class FormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      group1: new FormGroup({
        control1: new FormControl('', Validators.required),
      }),
      group2: new FormGroup({
        control2: new FormControl('', Validators.required),
      }),
    });
  }
}