angularangular6angular-reactive-formsvaluechangelistener

Value changes is not getting called in Reactive Form using Angular6


i am using reactive form for dropdown and i want the value changes to be called when my dropdown value changes, i have implemented like this

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

but when i change the value in dropdown, the value changes is not getting called eventough i have subscribed. what is wrong?

I even tried to use this on ngOninit()

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

but it is not working

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>

.ts file

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 }]
    })
  }

Solution

  • You have a typo here formControlname in your template, possibly because of that it doesn't work:

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

    Check stackblitz