使用角度驗證* ngFor使用的窗體2 [formControl]

Question

我有一個角度窗體，它使用*ngFor來重複輸入框。此外，我必須動態驗證由*ngFor生成的所有輸入框。

有一個名爲list的JSON數組包含Questions。我必須爲答案生成輸入框，並且應該驗證它們。驗證信息也在列表中。

這是列表

[{id:1, 
mandatory:false, 
questionDescription:"Blue flags are in position and contain words 「Stop, Tank Car Connected」 or 「Stop, Men at Work」", 
questionType:1, 
validation:{maximum:100,minimum:0}}, 
{id:2, 
mandatory:true, 
questionDescription:"Wheels are chocked and handbrake(s) set」 or 「Stop, Men at Work", 
questionType:2, 
validation:{maxLength:10,minLength:3}}] 

我嘗試作爲在這裏所描述以驗證生成的輸入框的一例。 https://scotch.io/tutorials/angular-2-form-validation（請參閱此處的驗證表單）。

因此，我必須爲每個輸入框提供驗證信息，如下所示。 （從給定的教程本示例）

constructor(fb: FormBuilder){ 
    this.complexForm = fb.group({ 
     'firstName' : [null, Validators.required], 
     'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])] 
    }) 

這是它的HTML。

 <div class="form-group"> 
     <label>First Name:</label> 
     <input class="form-control" type="text"[formControl]="complexForm.controls['firstName']"> 
     </div> 
     <div class="form-group" > 
     <label>Last Name</label> 
     <input class="form-control" type="text" [formControl]="complexForm.controls['lastName']"> 
     </div> 

所以在我的情況下，所有的輸入框產生的*ngFor，我必須動態地分配標籤，如firstName，lastName那些方框。 所以我用question.id作爲標籤，並按照其次執行控制組。

inspectionForm: FormGroup; 

    constructor(fb: FormBuilder) { 

    this.questionTemplate = templateService.getQuestionTemplate(); 

    let objString: string = "{"; 

    for (let item of this.questionTemplate.sectionList[0].questionList) { 
     if (item.questionType == 2) { 
     objString += '"' + item.id + '":null,'; 
     } 
    } 

    objString = objString.slice(0, -1); 
    objString += '}'; 
    let objJson = JSON.parse(objString); 

    for (let item of this.questionTemplate.sectionList[0].questionList) { 
     if (item.questionType == 2) { 
     objJson[item.id] = [null,Validators.compose([Validators.minLength(item.validation.minLength), Validators.maxLength(item.validation.maxLength)])]; 
     } 
    } 
    this.inspectionForm = fb.group(objJson); 
} 

這是我的HTML代碼。

<form [formGroup]="inspectionForm" (ngSubmit)="submitForm(inspectionForm.value)"> 

      <div *ngFor="let question of section.questionList" [ngSwitch]="question.questionType"> 
       <ion-row *ngSwitchCase="QuestionType.String"> 
       <ion-col width-80>{{question.questionDescription}}</ion-col> 
       <ion-col width-20> 
        <ion-input id="{{question.id}}" type="text" class="inspection-bottom-border" [formControl]="inspectionForm.controls['{{question.id}}']"></ion-input> 
       </ion-col> 
       </ion-row> 
      </div> 

      <div class="form-group"> 
       <button type="submit" class="btn btn-primary" [disabled]="!inspectionForm.valid">Submit</button> 
      </div> 

    </form> 

問題是....

如果我定義爲[formControl][formControl]="inspectionForm.controls['{{question.id}}']"

我遇到一個錯誤如下，

unhandled Promise rejection: Template parse errors: 
Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [inspectionForm.controls['{{question.id}}']] in InspectionPage@36:91 ("idth-20> 
       <ion-input id="{{question.id}}" type="text" class="inspection-bottom-border" [ERROR ->][formControl]="inspectionForm.controls['{{question.id}}']"></ion-input> 

然後我搜索了一個答案在StackOverflow中，我發現有人說在一個t中不使用[]和{{}} IME（Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"）

但是，如果我除去[]和定義如下

formControl="inspectionForm.controls['{{question.id}}']" 

我得到一個錯誤如下

EXCEPTION: Error in ./InspectionPage class InspectionPage - inline template:36:91 caused by: Cannot create property 'validator' on string 'inspectionForm.controls['2']' 

（這 '2' 的是第一類型的question.id 2問題）

如果我定義如下發生相同錯誤

formControl="inspectionForm.controls['2']" 

但問題是，如果我定義與[formControl]

[formControl]="inspectionForm.controls['2']" 

應用程序是完美的工作如下....

但我必須動態地給question.id。我該怎麼做？

有沒有人有解決這個錯誤的方法。請給個建議。

非常感謝。

Answer 1

只使用[formControl]="inspectionForm.controls[question.id]"

感謝@Sasxa的答案