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