访问 FormArray 中控件的模板内的验证器状态

Question

我正在使用 Angular 的响应式表单，并希望根据控件的无效值属性将 css 样式应用于 FormArray 内的控件。我想出了以下方法，但我认为 ngClass 属性中的表达式太长太复杂。是否有更简洁的方法来访问 FormArray 中控件的无效属性？

模板：

<form [formGroup]="myForm" class="form-horizontal">
    <div class="form-group" [ngClass]="{'has-error': myForm.controls.name.invalid }">
        <label class="control-label">Name</label>
        <input formControlName="name" type="text" class="form-control" />
    </div>
    <div formArrayName="array1">
        <div *ngFor="let f of array1_FA.controls; let i = index" [formGroupName]="i">
            <div>
                <div class="form-group" 
                    [ngClass]="{'has-error': myForm.controls.array1.at(i).controls.question.invalid}">

                    <label class="control-label">Question #{{i+1}}</label>
                    <input formControlName="question" class="form-control" type="text" />
                </div>
                <div class="form-group" 
                    [ngClass]="{'has-error': myForm.controls.array1.at(i).controls.response.invalid}">

                    <label class="control-label">Answer #{{i+1}}</label>
                    <input formControlName="response" class="form-control" type="text" />
                </div>
            </div>
        </div>
    </div>
</form>

组件：

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

@Component({
    selector: 'form-array-validation',
    templateUrl: './form-array-validation.component.html'
})

export class FormArrayValidationComponent {

    myForm: FormGroup;
    questions = ['Q1', 'Q2', 'Q3', 'Q4'];

    constructor(private fb: FormBuilder) {
        this.createForm();
    }

    createForm() {
        this.myForm = this.fb.group({
            name: ['Name1', Validators.required],
            array1: this.fb.array(this.questions.map(val => this.fb.group({
                question: [val, Validators.required],
                response: [null, Validators.required]
            })))
        });
    }

    get array1_FA(): FormArray {
        return this.myForm.get('array1') as FormArray;
    };
}

Answer 1

当表单组无效时，Angular在其上添加ng-invalid class。您可以使用它来完全删除 class 绑定。

Answer 2

您应该可以这样做：

myForm.get(`array1.${i}.question`).invalid

请注意，这些是反引号。

（我不得不将其更改为答案，因为评论正在吃掉反勾号。）

Answer 3

在这种情况下，您可以在模板的迭代中使用 f：

*ngFor="let f of array1_FA.controls;

这让你的代码有点 shorter/cleaner，所以不是：

[ngClass]="{'has-error': myForm.controls.array1.at(i).controls.question.invalid}">

做：

[ngClass]="{'has-error': f.get('question').invalid}

或

[ngClass]="{'has-error': f.controls.question.invalid}

访问 FormArray 中控件的模板内的验证器状态

Accessing validator’s state inside a template for an control in a FormArray

angular-validation

angular

angular-reactive-forms