angular.js javascript typescript Angular Form表单添加控件、监听

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

});

推荐文章