angular – 动态添加和删除表单元素的表单验证

您可以将表单绑定到表单模型

<form [ngFormModel]="form">
  <div *ngFor="let item of controls let idx=index">
    <div class="row">
      <div class="col-lg-9">
        <label>{{item.name}}</label><input type="text" class="form-control" [ngControl]="item.name"  [(ngModel)]="values[item.name]">
        {{item.control.errors | json}}
      </div>
      <div class="col-lg-3 pull-left">
        <div><button (click)="removeDomain(i)">remove</button></div>
      </div>
    </div>
</div>

<hr>

<div>
  <label>control name</label><input #nameInput>
  <label>validator</label><select #validatorInput>
    <option>required</option>
    <option>minLength</option>
    <option>maxLength</option>
  </select>
  <label>length</label><input type="number" #lengthInput>
  <button (click)="addDomain(nameInput.value,validatorInput.value,lengthInput.value)">add</button>
</div>

export class App {
  form:ControlGroup;
  controls [
    { name: 'name',control: new Control('',Validators.required) },{ name: 'password',Validators.minLength(3))}
  ];
  values = {
    name: '',password: '',}

  constructor(fb:FormBuilder) {
    this.form = fb.group();
    this.name = 'Angular2 (Release Candidate!)'
    this.controls.map((item) => {
      console.log('map item',item);
      this.form.addControl(item.name,item.control);
    });
  }

  removeDomain(i) {
    this.values[this.controls[i].name]=undefined;
    this.form.removeControl(this.controls[i].name);
    this.controls.splice(i);
    this.form.controls.forEach(c => c.updateValueAndValidity());
  }

  addDomain(name,validator,length) {
    this.values[name] = '';
    var validator;
    if(length) {
      validator = Validators[validator](length);
    } else {
      validator = Validators[validator];
    }

    let newCtl = new Control('',validator);
    this.controls.push({name: name,control: newCtl});
    this.form.addControl(name,newCtl);
    //this.controls.forEach(c => this.form.controls[c.name].updateValueAndValidity());
  }
}