angular - 如何清除对话框 Material Angular 2内的表格

Question

我在 Angular 2 Material 上创建了一个对话框。我打开模式如下:

我的组件

....
private refDialog;
@ViewChild('display') display;

openDialog() {
    this.refDialog= this.dialog.open(this.display);
}
....

我的html

<ng-template #display>
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class='col-md-12'>
            <md-input-container>
                <input mdInput placeholder="Name" name="name" [(ngModel)]="product.name" #name="ngModel">
            </md-input-container>
        </div>

        .....

    </form>
</ng-template>

我需要在打开对话框之前清除表单。我想尽可能简单地做到这一点。我正在使用 primeNG 对话框，并使用它来使用 this.f.reset ();它奏效了。但有 Angular Material 2 的工作原理不同。

我尝试了一切但没有成功。这对我不起作用:

....
private refDialog;
@ViewChild('display') display;
@ViewChild('f') f;

openDialog() {
    this.f.reset();
    this.refDialog= this.dialog.open(this.display);
}

....

有人可以帮我吗？

Answer 1

看看我创建的 Plunker 演示:HERE

这是对话框组件:

export class DialogComponent implements OnInit{
  @ViewChild('myform') myform;
  constructor(public dialogRef: MdDialogRef<DialogComponent>){}
  ngOnInit() {
  this.myform.resetForm();
  }
}

这是根组件:

openDialog(){
  this.dialog.open(DialogComponent);
}

正如您在 GIF 中看到的那样，每次清除 HTML 中的硬编码输入值以及表单脏状态时，表单都会被清除，以便使用 resetForm() 方法