Question

我有一个嵌套的表格组

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)">

Answer 2

您可以使用这样的点表达式直接访问所需的嵌套FormControl

<mat-error *ngIf="outerForm.get('firstFormGroup.nserNumber').errors.required">
<!-- or -->
<mat-error *ngIf="outerForm.get('firstFormGroup.nserNumber').hasError('required')">

可接受的答案还包含脏/触动的检查，当使用垫错误组件时，这是不必要的，材质库自行处理。

Answer 3

在您的 component.ts 中，您应该创建一个getter方法来获取对firstFormGroup的控制。

get firstFormGroupControls() {
  return this.outerForm.get('firstFormGroup')['controls'];
}

在您的 component.html 中，您可以像下面那样访问firstFormGroupControls：

 <mat-error *ngIf="firstFormGroupControls.nserNumber.required">Required</mat-error>

Answer 4

就我而言，我这样做：

在组件文件中：

this.address = this.formBuilder.group({
  main: new FormControl('', Validators.required),
  city: new FormControl('', Validators.required),
  state: new FormControl('', Validators.required),
  postal: new FormControl('', Validators.required)
})

ngOnInit(): void {
this.profileForm = this.formBuilder.group({
  fullName: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  telephone: new FormControl('', [Validators.required]),
  address: this.address
})

}

在HTML中：

<form
        [formGroup]="profileForm"
        (ngSubmit)="updateProfile()"
>
<form formGroupName="address">
                    <mat-form-field
                        appearance="outline"
                        class="example-full-width"
                    >
                        <mat-label>Address</mat-label>
                        <textarea
                            rows="15"
                            matInput
                            formControlName="main"
                        ></textarea>
                        <mat-error *ngIf="address.controls['main'].hasError('required')">Address is required</mat-error>
                    </mat-form-field>
                    <table class="example-full-width">
                        <tbody>
                            <tr>
                                <td>
                                    <mat-form-field
                                        appearance="outline"
                                        class="example-full-width"
                                    >
                                        <mat-label>City</mat-label>
                                        <input
                                            matInput
                                            placeholder="Ex. Bangalore"
                                            formControlName="city"
                                        >
                                        <mat-error *ngIf="address.controls['city'].hasError('required')">City is required</mat-error>
                                    </mat-form-field>
                                </td>
                                <td>
                                    <mat-form-field
                                        appearance="outline"
                                        class="example-full-width"
                                    >
                                        <mat-label>State</mat-label>
                                        <input
                                            matInput
                                            placeholder="Ex. Karnataka"
                                            formControlName="state"
                                        >
                                        <mat-error *ngIf="address.controls['state'].hasError('required')">State is required</mat-error>
                                    </mat-form-field>
                                </td>
                                <td>
                                    <mat-form-field
                                        appearance="outline"
                                        class="example-full-width"
                                    >
                                        <mat-label>Postal Code</mat-label>
                                        <input
                                            matInput
                                            #postalCode
                                            maxlength="5"
                                            placeholder="Ex. 94105"
                                            value
                                            maxlength="6"
                                            minlength="6"
                                            formControlName="postal"
                                        >
                                        <mat-error *ngIf="address.controls['postal'].hasError('required')">Postal Code is required</mat-error>
                                    </mat-form-field>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
</form>

对我来说很好，这是屏幕截图：

嵌套反应形式组中的Uning垫错误

4 个答案: