CODEWITHSUNDEEP
angularangular6angular-reactive-formsvaluechangelistener
Lijin Durairaj
Lijin Durairaj

Reputation: 5240

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

Upvotes: 2

Views: 2095

Answers (2)

Vadim
Vadim

Reputation: 3439

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

Upvotes: 1

user9298624
user9298624

Reputation:

You may want:

this.employeerosterForm.valueChanges

or

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

Also make sure your form in the template is properly wired up to match the class, it could be orphaned in some way.

Upvotes: 0

Related Questions