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

这篇好文章是转载于：学新通技术网