使用 Angular 2 [formControl] 验证 *ngFor 使用的表单

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 中搜索了答案，发现有人说不要一次性使用 [] 和 {{}} (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'是第一个类型2问题的question.id）

如果我定义如下同样的错误发生

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

但问题是如果我用[formControl]定义如下

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

该应用运行良好....

但我必须动态地给question.id。我该怎么做？

是否有人对此错误有解决方案。请给个建议。

非常感谢。

Answer 1

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

感谢@Sasxa 的回答