Les changements de valeur ne sont pas appelés dans un formulaire réactif utilisant Angular6

Question

J'utilise un formulaire réactif pour la liste déroulante et je veux que les changements de valeur soient appelés lorsque la valeur de la liste déroulante change, j'ai implémenté comme ceci

 ngOnInit() {
    this.employeerosterForm = this._formbuilder.group({
      drpDomain: [''],
      drpPlatform: [{ value: this.platformInitialValue, disabled: this.platformControlDisabled }],
      drpApplication: [{ value: this.applicationInitialValue, disabled: this.applicationControlDisabled }],
      drpIndividual: [{ value: this.individualInitialValue, disabled: this.individualControlDisabled }]
    })

 this.employeerosterForm.controls.drpDomain
      .valueChanges
      .subscribe(domain => {
        alert();
      });
  }

mais quand je change la valeur dans la liste déroulante, les changements de valeur ne sont pas appelés bien que j'aie souscrit. qu'est-ce qui ne va pas ?

J'ai même essayé d'utiliser ceci sur ngOninit()

 this.employeerosterForm.get('drpDomain')
    .valueChanges
      .subscribe(domain => {
        alert();
      });

mais cela ne fonctionne pas

EDIT 1

HTML

<select class="form-control" formControlname='drpDomain'>
              <option>Select Domain</option>
              <option *ngFor='let d of domain' [value]='d.DOMAINNAME'>{{d.DOMAINNAME}}</option>
            </select>

fichier .ts

ngOnInit() {
    this.initializeControls();
    this.interactionWatchDog();
  }

 interactionWatchDog() {
    this.employeerosterForm.get('drpDomain')
      .valueChanges
      .subscribe(domain => {
        alert();
      });
  }

initializeControls() {
    this.employeerosterForm = this._formbuilder.group({
      drpDomain: [''],
      drpPlatform: [{ value: this.platformInitialValue, disabled: this.platformControlDisabled }],
      drpApplication: [{ value: this.applicationInitialValue, disabled: this.applicationControlDisabled }],
      drpIndividual: [{ value: this.individualInitialValue, disabled: this.individualControlDisabled }]
    })
  }

Answer 1

Vous avez une faute de frappe ici formControlname dans votre modèle, c'est peut-être pour cette raison que cela ne fonctionne pas :

<select class="form-control" formControlName='drpDomain'>
  <option>Select Domain</option>
  <option *ngFor='let d of domain' [value]='d.DOMAINNAME'> 
    {{d.DOMAINNAME}}
  </option>
</select>

Vérifiez stackblitz

Answer 2

Vous pouvez le vouloir :

this.employeerosterForm.valueChanges

o

this.employeerosterForm.get('controlName').valueChanges

Assurez-vous également que votre formulaire dans le modèle est correctement câblé pour correspondre à la classe, il pourrait être orphelin d'une certaine manière.