在 Angular2 FormGroup 中验证动态添加的输入

Question

我有一个表单，点击按钮即可添加输入。

addInput() {
    let input: {} = {
      "text": null
    };
    this.arr.push(domain); 
      let key = 'textC_' + (this.arr.length - 1);
      this.form.controls[key] = new FormControl("", Validators.required)
  }

我正在使用以下代码在 HTML 上呈现：

<div class="form-group row">
   <label>Input</label>
   <div class="col-sm-9">
      <ANY *ngFor="let item of arr; let i = index">
         <div class="row">
            <div class="col-sm-6 top5">
               <input type="text" formControlName="textC_{{i}}"  id="name" [(ngModel)]="arr[i].text" >
               <div class="help-block" *ngIf="!form.controls.textC_{{i}}.valid  > 
               Value is required
            </div>
         </div>
   </div>
   </ANY>
</div>
</div>

如何使用这种方法呈现验证消息。

form.controls.textC_{{i}}.valid 无效

有替代方案吗？

使用angular rc5

Answer 1

不要使用表达式语法 {{}}。 ngIf 指令已经将赋值视为表达式。尝试：

<div class="help-block" *ngIf="!form.controls['textC_' + i].valid">

在 Angular2 FormGroup 中验证动态添加的输入

Validation in Angular2 FormGroup for dynamically added inputs

angular2-formbuilder

angular