Angular Form表单添加控件
添加FormGroup
addControl():向组件中添加控件
addControl(name: string, control: AbstractControl, options: { emitEvent?: boolean; } = {}): void
参数:
- name: string 要注册到集合中的控件名
- control:AbstractControl 提供与该控件名对应的控件。
- options: object 指定此FormGroup实例在添加新控件后是否应发出事件。
this.validateForm.addControl(dataType, this.fb.group({
Account: ['', [Validators.required]],
Stock_Type: ['', []],
Quit_Date: ['', []],
Quit_Reason: ['', []],
Remark: ['', []],
}));
**当需要添加子控件时:**通过类型断言将类型提前声明为Form Group(根据实际类型断言)
(this.validateForm.get(dataType) as FormGroup).addControl('Agreement', this.fb.array([
this.fb.group({
Due_Date: new FormControl(null, [Validators.required]),
Strike_Price: new FormControl('', [])
}),
]));
FormArray
FormArray
是 Angular 表单中定义的三个基本构造块之一。
FormArray
聚合了数组中每个表单控件的值。 它还会根据其所有子控件的状态总结出自己的状态。比如,如果 FromArray
中的任何一个控件是无效的,那么整个数组也会变成无效的。
方法:
- at(index: number): AbstractControl —— 获取数组中指定
index
处的AbstractControl
。- index(number):要获取的控件在数组中的索引
- 返回值:AbstractControl
- push(control: AbstractControl, options: { emitEvent?: boolean; } = {}): void —— 在数组的末尾插入一个新的
AbstractControl
- control:AbstractControl 要插入的表单控件
- options:object 指定此FormArray实例在添加新控件后是否应发出事件。
- removeAt(index: number, options: { emitEvent?: boolean; } = {}): void —— 移除位于数组中的指定
index
处的控件。- index: number 要移除的控件在数组中的索引
- options:object 指定此FormArray实例在添加新控件后是否应发出事件。
新增FormArray:通过Push()直接在后面追加
//因为FormArray是FormGroup的子控件,所以也需要进行类型断言
((this.validateForm.get(item) as FormGroup).get('Agreement') as FormArray).push(this.fb.group({
Due_Date: [null, []],
Strike_Price: ['', []],
}));
当需要有些Form表单的输入事件无法通过指令监听时,可以通过以下方式监听值的改变
**AbstractControl.valueChanges:**一个多播 Observable(可观察对象),每当控件的值发生变化时,它就会发出一个事件 —— 无论是通过 UI 还是通过程序。每当你调用 enable()
或 disable()
,但没有传入 {emitEvent: false}
参数时,它也同样会发出一个事件。
(this.validateForm.get(dataType) as FormGroup).get('Quit_Date').valueChanges.subscribe(data => {
console.log(data, data != null);
if (!!data) {
this.setOfCheckedId.add(dataType);
(this.validateForm.get(dataType) as FormGroup).get('Quit_Reason').setValidators([Validators.required]);
} else {
this.setOfCheckedId.delete(dataType);
(this.validateForm.get(dataType) as FormGroup).get('Quit_Reason').clearValidators();
}
(this.validateForm.get(dataType) as FormGroup).get('Quit_Reason').updateValueAndValidity();
(this.validateForm.get(dataType) as FormGroup).get('Quit_Reason').enable();
});