Angular FormArray 显示验证错误

Question

我有在 FormBuilder 的帮助下构建的 Angular 表单。

Form 包含一个 FormArray，它具有用户想要的任意多的字段。我已经为字段设置了验证器

this.fb.array([this.fb.control('', Validators.required)])

并且对于每个新的 push 验证器都是相同的。

问题是我不知道如何访问特定字段的 isValid 属性，因为它们通过 [formControlName]="index"与 FormControl 绑定(bind)".

我试过这样做，但似乎行不通

<div *ngIf="array.at(index).invalid" class="alert alert-danger p-2">
</div>

其中 array 是从父级传递的 formArray.controls。

更新 #1

有案例https://stackblitz.com/edit/angular-7ppkoh

Answer 1

我真的不认为这完全可以在模板上实现。这是因为要访问模板中 FormArray 的控件状态，您必须访问 this.formGroup.get('features').controls[i].invalid。但是由于 get 返回类型为 AbstractControl 的实例，您将无权访问其上的 controls 数组。为此，您必须将从 this.formGroup.get('features') 返回的任何内容类型转换为 FormArray。而且我真的认为在模板上不可能做到这一点。

您必须在您的类中创建一个方法，该方法将根据索引返回控件的有效性。

因此，如果我们继续引用您的 stackblitz，例如，方法如下:

<form [formGroup]="formGroup">
  <div formArrayName="features">
    <div 
      class="row no-gutters form-group" 
      *ngFor="let feature of features.controls; let index = index; let last = last">
      <input 
        type="text" 
        class="form-control px-2 col" 
        [formControlName]="index" 
        title="feature" 
        required>

        IS Invalid - {{ getValidity(index) }}

      <div class="col-3 col-md-2 row no-gutters">
        <button 
          class="col btn btn-outline-danger" 
          (click)="removeFeature(index)">
          -
        </button>
        <button 
          class="col btn btn-success" 
          *ngIf="last" 
          (click)="addFeature()">
          +
        </button>
      </div>
    </div>
  </div>
</form>

在你的类里面:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(
    private fb: FormBuilder,
  ) {}

  formGroup = this.fb.group({
    features: this.fb.array([this.fb.control('', Validators.required)])
  });

  get features(): FormArray {
    return this.formGroup.get('features') as FormArray;
  }

  addFeature(): void {
    this.features.push(this.fb.control('', Validators.required));
  }

  getValidity(i) {
    return (<FormArray>this.formGroup.get('features')).controls[i].invalid;
  }

  removeFeature(index): void {
    this.features.removeAt(index);
    console.log(this.features);
  }

}

更新

几个月前，我意识到在一种数据绑定(bind)语法中调用方法(即字符串插值 - {{ ... }}，属性绑定(bind) - [propertyName] ="methodName()"，或属性绑定(bind) - [class.class-name]="methodName()" 或 [style.styleName]="methodName()") 就性能而言成本极高。

因此，您应该使用:

{{ formGroup.controls['features'].controls[index].invalid }}

代替:

{{ getValidity(index) }}

Here's an Updated Working Sample StackBlitz for your ref.

如果您想了解更多，我强烈建议您查看此主题:

Angular Performance: DOM Event causes unnecessary function calls

希望这有帮助:)