Question

使用Angular Material mat-select选项更改时，我发生了 change （或在新的Angular Material版本中为 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

您可以为选择表单控件订阅valueChanges，在这种情况下，您无需在通知值更改时就在模板上订阅change事件。

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

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

demo

使用mat-select重置表单并获取更改回调

1 个答案: