2017-10-18 126 views
1

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

你有沒有看不用彷徨?這提供了一個快捷的語法:https://angular.io/guide/reactive-forms#inspect-formcontrol-properties – DeborahK

+0

我的確認爲.get使它更易讀,但仍然非常接近。 (i).get('question')。invalid' – EricAZ

回答

0

在這種情況下,你可以在迭代中使用您的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} 
+0

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

+0

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

1

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

+0

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

0

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

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

注意,這些都是反勾。

(我不得不將其更改爲答案,因爲該意見所吃的反引號)。

+0

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