Angular FormArray显示验证错误

Question

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

窗体包含一个FormArray，其中具有用户想要的多个字段。我已经为字段设置了验证器

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

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

问题是我不知道如何访问特定字段的isValid属性，因为它们与FormControlvia 绑定[formControlName]="index"。

我已经尝试过这样做，但是似乎没有用

<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

我在 angular 8 中有这个例子。

在您的模板中执行此操作时。

<ng-container formArrayName="calibers">
        <ng-container *ngFor="let item of qualityForm.get('calibers')['controls']; let index = index" [formGroupName]="index.toString()">
          <ion-item>
            <ion-label position="floating">{{ getCaliberName(item) }}</ion-label>
            <ion-input formControlName="percentage" placeholder="Input Percentage" type="number" clearInput></ion-input>
            <ng-container *ngIf="item.get('percentage').hasError('required')">
              <span class="errorMsg">Input Percentage</span>
            </ng-container>
            <ng-container *ngIf="item.get('percentage').hasError('max')">
              <span class="errorMsg">Percentage cannot be greater than 100</span>
            </ng-container>
          </ion-item>
        </ng-container>
      </ng-container>

ngFor 中的那个 item 对象会让你访问表单控件。获取数组形式错误所需要做的就是item.get('percentage').hasError('required')

Answer 2

I don't really think this would be possible completely on the template. That's because to access the FormArray's control's state in your template, you'll have to access this.formGroup.get('features').controls[i].invalid. But since get returns an instance of type AbstractControl, you won't have access to the controls array on it. For that, you'll have to typecast whatever is returned from this.formGroup.get('features') into a FormArray. And I don't really think that would be possible on the template.

You'll have to create a method in your class that would return the validity of the control based on the index.

So if we continue to refer to your stackblitz eg, here's how:

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

And in your class:

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);
  }

}

UPDATE

A few months back I realized that calling a method in one of the data-binding syntaxes(i.e. String Interpolation - {{ ... }}, Property Binding - [propertyName]="methodName()", or Attribute Binding - [class.class-name]="methodName()" OR [style.styleName]="methodName()") is extremely costly as far as performance is concerned.

So, you should do it using:

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

Instead of:

{{ getValidity(index) }}

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

Answer 3

在 ngFor 语句中，您定义了用于表单数组的每个控件的变量“功能”。

*ngFor="let feature of features.controls; let index = index; let last = last"

您可以使用该变量来获取该控件的无效状态。

feature.invalid 

这是Stackblitz

此外

当您使用响应式表单时，您不需要 HTML 中的 required 属性。

所以这

<input type="text" class="form-control px-2 col" [formControlName]="index" title="feature" required>

可

<input type="text" class="form-control px-2 col" [formControlName]="index" title="feature">