Как перехватить событие привязки элемента select с помощью formcomtrol - ReactiveFomrModule -Angular 4

Question

Я использую реактивный модуль формы и создал форму управления для тега выбора.При загрузке страницы я извлекаю данные из бэкэнда и связываю их с помощью 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',
})

и мой код внутри класса

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

Но этот onChange не запускаетсякогда данные исправляются с помощью элемента управления формы .patchValue, когда я выбираю опцию вручную, это срабатывает.

Я хочу захватить событие, которое запускается, когда данные исправляются в теге выбора.

Answer 1

Итак, поделитесь примером кода, чтобы удовлетворить ваши требования, которые работали для меня:

Директива

 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
  ]

Answer 2

Отлично!Я тестирую некоторые примеры здесь!В вашем компоненте:

  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>

Попробуйте и скажите мне, если работает !!Спасибо!