2
votes

Using Angular Material mat-select I have the change (or selectionChange in new Angular Material version) event when the option changed. But when I reset my form, the event isn't triggered... How can I do this?

online code: https://stackblitz.com/edit/material2-beta11-pof3tu

@ViewChild(FormGroupDirective)
formGroupDirective: FormGroupDirective;

options = [
  'Option-1',
  'Option-2',
  'Option-3',
  'Option-4'
];

aForm: FormGroup;

constructor(fb: FormBuilder) {
  this.aForm = fb.group({
    selectForm: [null]
  })
}

selectChanged() {
  console.log('mat-select has changed!');
}

reset() {
  this.aForm.reset();
  this.formGroupDirective.resetForm();
}
<form [formGroup]="aForm">

  <mat-select formControlName="selectForm" placeholder="Enter an option" (change)="selectChanged()">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>

</form>

<button (click)="reset()">Reset</button>
1
I did't get what is the problem ? can you explain more - malbarmavi

1 Answers

1
votes

You can subscribe to valueChanges for select Form control in this case you don't need to subscribe th change event at the template any time the value change you get notify.

this.aForm.get('selectForm').valueChanges.subscribe( value => {
      console.log('mat-select has changed! =>', value);
});

when you reset the form you will get notify as the value change to null

demo