使用 class 进行表单数组验证

Question

我有实现表单数组的表单，但在这里我基本上无法验证我不知道如何从表单数组获取控件。我有一个控制未定义的错误。

在这里你可以看到我尝试过的代码

<form [formGroup]="myForm">

    <div formArrayName="addresses" >
        <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

            <div [formGroupName]="i" class="myform">
                <label>street</label>
                <input type="text" class="form-control" formControlName="street" [class.valid]="address.street.valid"><br><br>
                <label>postcode</label>
                <input type="text" class="form-control" formControlName="postcode">
            </div><br><br>
        </div>
    </div><br><br>
        <pre>form value: <br>{{myForm.value | json}}</pre>
</form>

您可以在此处查看完整的工作示例

https://stackblitz.com/edit/angular-r4jruv?file=app%2Fapp.component.html

Answer 1

您正在直接从 address 访问 street 但它实际上在 address.controls

<form [formGroup]="myForm">

<div formArrayName="addresses" >
    <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

        <div [formGroupName]="i" class="myform">
            <label>street</label>
            <input type="text" class="form-control" formControlName="street" [class.valid]="address.controls.street.valid"><br><br>
            <label>postcode</label>
            <input type="text" class="form-control" formControlName="postcode">
        </div><br><br>
    </div>
</div><br><br>
    <pre>form value: <br>{{myForm.value | json}}</pre>
</form>

这应该有效

Answer 2

您可以使用表单控制状态：

<input ... [class.valid]="address.status === 'VALID'">

Here is an edit of your stackblitz.

Answer 3

首先，将 getter 添加到您的组件以缩短 FormArray 控件的访问路径。

component.ts

fa: FormArray;

ngOnInit() {
  const fa = this._fb.array([
    this.initAddress(),
  ]);

  this.fa = fa;

  this.myForm = this._fb.group({
    addresses: fa
  });
}

接下来，更新 html

component.html

<div *ngFor="let address of fa.controls; let i=index" class="panel panel-default">
  <div [formGroupName]="i" class="myform">
    <label>street</label>
    <input type="text" class="form-control" formControlName="street" [class.valid]="address.valid"><br><br>
  </div>
</div>

Live demo

使用 class 进行表单数组验证

Form array validation with class

angular

angular-reactive-forms