分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – 动态添加和删除表单元素的表单验证，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个表单元素,我可以动态添加和删除值.

例如,在下面的代码域中,可以使用addDomain和removeDomain添加和删除

<div *ngFor="let item of company.domains">
                    <div class="row">
                        <div class="col-lg-9">
                            <input type="text" class="form-control" ngControl="domainC"  [(ngModel)]="company.domains[i]">
                        </div>
                        <div class="col-lg-3 pull-left">
                            <a (click)="removeDomain(i)"> <i  class="fa fa-times"></i></a>
                            <a (click)="addDomain()"> <i  class="fa fa-plus"></i></a>
                        </div>
                    </div>
                </div>

我需要在提交时验证这些,因为所有添加的值都是必需的.我在角度2中使用COntrol,但无法弄清楚如何对这些元素应用验证,任何帮助将不胜感激.

解决方法

Plunker example

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

<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());
  }
}