Angular FormArray显示验证错误 [英] Angular FormArray display validation errors

问题描述

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

I have Angular form that is built with help of FormBuilder.

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

Form contains a FormArray which has as many fields as user wants. I've set validator for fields

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

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

and for each new push validator is the same.

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

The problem is that I don't know how to access a specific field's isValid property since they are bound with FormControl via [formControlName]="index".

我已经尝试过这样做，但是似乎不起作用

I've tried to do it that way, but it doesn't seem to work

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

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

有一种情况 https://stackblitz.com/edit/angular-7ppkoh

推荐答案

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

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>

在您的课堂上:

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

}

更新

几个月前，我意识到以一种数据绑定语法(即字符串插值-{{ ... }}，属性绑定-[propertyName]="methodName()"或属性绑定-[class.class-name]="methodName()" OR [style.styleName]="methodName()")之一调用方法是就性能而言，这是非常昂贵的.

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.

因此，您应该使用:

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

代替:

{{ getValidity(index) }}

这是更新后的 正在工作的示例StackBlitz 供您参考.

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

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

If you wanna know more about it, I highly recommend you to check this thread out:

角度性能:DOM事件原因不必要的函数调用

Angular Performance: DOM Event causes unnecessary function calls

希望这会有所帮助:)

这篇关于Angular FormArray显示验证错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！