我正在使用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;
};
}
你有没有看不用彷徨?这提供了一个快捷的语法:https://angular.io/guide/reactive-forms#inspect-formcontrol-properties – DeborahK
我的确认为.get使它更易读,但仍然非常接近。 (i).get('question')。invalid' – EricAZ