在表單陣列中訪問模板內控件的驗證器狀態

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

來源

2017-10-18 EricAZ

你有沒有看不用彷徨？這提供了一個快捷的語法：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}

來源

2017-10-20 11:30:41 Alex

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

當然，我甚至沒有看到類的實現，只是看着財產路徑的「縮短」，忽略了其餘部分：D但是，這是一個明智的舉動:) – Alex

當窗體組無效，角添加就可以了NG-無效類。您可以使用它來完全刪除類綁定。

來源

2017-10-18 21:00:47

在這個特定的實例中，我試圖從第三方框架中使用一些現有的css類。 – EricAZ

你應該能夠做這樣的事情：

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

注意，這些都是反勾。

（我不得不將其更改爲答案，因爲該意見所吃的反引號）。

來源

2017-10-19 15:27:08 DeborahK

這是一個有趣的想法，但我不認爲我可以在模板中使用反引號，至少我沒有能夠做到這一點。 – EricAZ

在表單陣列中訪問模板內控件的驗證器狀態

回答

相關問題