1、Angular学习笔记45:响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值
2、Angular学习笔记48:响应式表单-FormArray 和 FormGroup的多层嵌套
博主网址:https://me.csdn.net/wjyyhhxit (值得关注)
3、angular6.x 动态表单 FormArrayName (经实践多层嵌套可用, 推荐!推荐!推荐!)
4、[Angular]——创建表单之FormArray、FormGroup (动态定义表单的属性,推荐!)
【静态定义表单】
this.form = this.fb.group({
ID: [""],
ItemNo: ["", Validators.required],
ItemName: ["", Validators.required],
Remark: [""],
ItemSpecs: this.fb.array([
new FormGroup({
ID: new FormControl(null),
ItemID: new FormControl(null),
IndexNo: new FormControl(null),
SpecName: new FormControl(null),
StdPrice: new FormControl(null),
}),
]),
});
【动态定义表单】
this.form = this.fb.group({
ID: [""],
ItemNo: ["", Validators.required],
ItemName: ["", Validators.required],
Remark: [""],
ItemSpecs: this.fb.array([]),
});
// 动态设置定段
let itemSpecs = this.form.controls["ItemSpecs"] as FormArray;
let aSpec = new FormGroup({});
aSpec.addControl('ID', new FormControl(null));
aSpec.addControl('ItemID', new FormControl(null));
aSpec.addControl('IndexNo', new FormControl(null));
aSpec.addControl('SpecName', new FormControl(null));
aSpec.addControl('StdPrice', new FormControl(null));
itemSpecs.push(aSpec);