5

我正在使用 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;
    };
}
4

3 回答 3

6

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

*ngFor="let f of array1_FA.controls;

这使您的代码更短/更清晰，因此而不是：

[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}
于 2017-10-20T11:30:41.340 回答
1

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

于 2017-10-18T21:00:47.273 回答
0

你应该能够做这样的事情：

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

请注意，这些是反勾号。

（我不得不将其更改为答案，因为评论正在吃掉后面的蜱虫。）

于 2017-10-19T15:27:08.340 回答