angular - 在嵌套 react 表单组中使用 mat-error

Question

我有一个嵌套的 FormGroup

this.outerForm= this.formBuilder.group({
  firstFormGroup: this.formBuilder.group({
    nserNumber: ['', Validators.required]
  }),
  ...
});

我正在尝试以下方法:

<fieldset formGroupName="firstFormGroup">
        <ng-template matStepLabel>Enter NSER</ng-template>
        <div class="formRow">
          <div class="col-custom-col-50">
            <mat-form-field>
              <input matInput placeholder="NSER number" id='nserNumber' formControlName="nserNumber">
              <mat-error *ngIf="outerForm.controls.firstFormGroup.controls.nserNumber.required">Required</mat-error>
            </mat-form-field>
            <pre>{{outerForm.controls.firstFormGroup.controls.nserNumber | json}}</pre> 
          </div>
        </div>

但是这个垫子错误不起作用。请帮忙

Answer 1

改为做

<mat-error *ngIf="outerForm.controls.firstFormGroup.controls.nserNumber.required">

这样做:

  <mat-error *ngIf="outerForm.controls.firstFormGroup.get('nserNumber').hasError('required') && (outerForm.controls.firstFormGroup.get('nserNumber').dirty || outerForm.controls.firstFormGroup.get('nserNumber').touched)">