我有一个表单元素,我可以动态添加和删除值.
例如,在下面的代码域中,可以使用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());
}
}
