如何使用 formcomtrol 捕获 select 元素的绑定事件 - ReactiveFomrModule -Angular 4

Question

我正在使用 reactiveformmodule 并为 select 标签创建了一个表单控件。在加载页面时，我从后端获取数据并使用 patchvalue 将其绑定到 selectformcontrol。但是这样做时 select 的更改事件不会被触发。

 in .html
 <select id="businessType" formControlName="businessType">
                    <option value="-1">Business type</option>
                    <option *ngFor="let business of businessTypes; let i=index;" [value]="i">{{business.b_type}}</option>
                </select>

 in .ts
 this.formGroupObject.patchValue({
        'businessType': 0 //"0" is coming from backend
    })

我的应用程序中有很多 select 标记，因此无法捕获每个 selectformcontrol 的值更改。

我想通过创建一个指令并向其添加 hostlistener 来进行概括，如下所示

@Directive({
selector: 'select',
})

我的代码在里面 class

@HostListener('change', ['$event'])
onChange(event) {
    //do something
}

但是当使用表单控件 .patchValue 修补数据时，不会触发此 onChange，当我手动 select 选项时会触发此操作。

我想捕获在 select 标记中修补数据时触发的事件。

Answer 1

太棒了！我在这里测试了一些例子！在您的组件中：

  testForm:FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    this.testForm = this.fb.group({
      select: ['']
    })
  }

  ngOnInit(){
    this.testForm.controls.select.valueChanges.subscribe((select: string) => {
      console.log(select)
    })
  }

在html中：

 <form [formGroup]="testForm">
    <select formControlName="select" placeholder="Selecione">
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
    </select>
  </form>

试一试，告诉我是否有效！！谢谢！

Answer 2

所以分享一些示例代码以满足您对我有用的要求：

指令

 import { Directive, ElementRef, HostListener } from '@angular/core';

    @Directive({
        selector: 'select'
    })
    export class SelectDirective {
        constructor(private el: ElementRef) { 
        }

        @HostListener('change', ['$event'])
        onChange(event) {
            console.log(event);
        }

        @HostListener('ngModelChange') onNgModelChange() {
            console.log('ngModelChange');
        }

    }

模块（你要在其中使用）

declarations: [
    SelectDirective
  ]

如何使用 formcomtrol 捕获 select 元素的绑定事件 - ReactiveFomrModule -Angular 4

How to capture bind event of select element using formcomtrol - ReactiveFomrModule -Angular 4

angular

angular4-forms