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

时间:2016-09-08 11:15:23

标签: angular angular2-formbuilder

我有一个表单,只需点击一下按钮即可添加输入。

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}}。有效无效

任何候补?

使用angular rc5

1 个答案:

答案 0 :(得分:0)

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

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