无法使用 FormArray 进行反应式表单验证

Question

我正在尝试使用一组 FormGroups 来验证我的表单。

它在添加 FormGroups 数组之前工作（material 步进器验证目的）。

HTML:

<form [formGroup]="formGroup" (ngSubmit)="submit()">
<mat-form-field>
    <input matInput formControlName="fullName" required>
    <mat-error *ngIf="formGroup.controls.formArray.controls['fullName'].errors?.required">Required</mat-error>
</mat-form-field>

<mat-form-field>
    <input matInput formControlName="shortName" required>
    <mat-error *ngIf="formGroup.controls.formArray.controls['shortName'].errors?.required">Required</mat-error>
</mat-form-field>
</form>

TS:

get formArray(): AbstractControl | null { return this.formGroup.get('formArray'); }

this.formGroup = this.fb.group({
    formArray: this.fb.array([
        this.fb.group({ fullName: [null, [Validators.required]] }),
        this.fb.group({ shortName: [null, [Validators.required]] }),
    ])
});

我做错了什么？

Answer 1

你这里的数组是一组数组，你需要这样对待它，顺便说一句，这是一种奇怪的方式...

<form [formGroup]="formGroup" (ngSubmit)="submit()">
  <ng-container formArrayName="formArray">
    <mat-form-field formGroupName="1">
        <input matInput formControlName="fullName" required>
        <mat-error *ngIf="formGroup.controls.formArray.controls[1].controls['fullName'].errors?.required">Required</mat-error>
    </mat-form-field>

    <mat-form-field formGroupName="2">
        <input matInput formControlName="shortName" required>
        <mat-error *ngIf="formGroup.controls.formArray.controls[2].controls['shortName'].errors?.required">Required</mat-error>
    </mat-form-field>
  </ng-container>
</form>

所以我添加的是一个引用表单数组名称的容器，然后是指令让它知道数组中每个控件的 formGroupName（在 FormArray 的情况下是索引）。我还在您的验证检查中添加了一个步骤，我可以在其中访问 formarray 控件索引。我完全不确定您为什么需要或想要这种结构，但这现在可以使用了。

无法使用 FormArray 进行反应式表单验证

Can't get reactive form validations to work using FormArray

angular

angular-reactive-forms

formarray

formgroups