在表单阵列中访问模板内控件的验证器状态

问题描述：

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

答

在这种情况下，你可以在迭代中使用您的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}

完美！我只是想起Angular类的绑定和我正在使用：'[class.has-error] =“f.get（'question'）。invalid”' – EricAZ

当然，我甚至没有看到类的实现，只是看着财产路径的“缩短”，忽略了其余部分：D但是，这是一个明智的举动:) – Alex

答

当窗体组无效，角添加就可以了NG-无效类。您可以使用它来完全删除类绑定。

在这个特定的实例中，我试图从第三方框架中使用一些现有的css类。 – EricAZ

答

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

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

注意，这些都是反勾。

（我不得不将其更改为答案，因为该意见所吃的反引号）。

这是一个有趣的想法，但我不认为我可以在模板中使用反引号，至少我没有能够做到这一点。 – EricAZ

在表单阵列中访问模板内控件的验证器状态

相关推荐