使用角度验证* 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的答案