使用mat重置表单-选择并获得更改回调

Question

使用角材料垫-选择我有改变(或selectionChange在新的角材料版本)事件时，选项改变。但当我重设表单时，事件不会被触发.我该怎么做？

在线代码：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>

​

Answer 1

您可以订阅用于select表单控件的valueChanges --在这种情况下，您不需要在任何时候在模板上订阅更改事件。

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

当您重置表单时，当值更改为null时，您将得到通知。

demo