首页 文章

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

提问于
浏览 次
2

使用Angular Material mat-select当选项改变时，我有更改（或新的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>
angular angular-material

1 回答

  • 1

    您可以为选择的表单控件订阅valueChanges，在这种情况下，您无需在模板更改时通过模板订阅更改事件 .

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

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

    demo

    回复于

相关问题