如何清除对话框材料角2内的表格

Question

我在 angular 2 材质上创建了一个对话框。我打开模态如下：

我的组件

....
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 ();它奏效了。但是角材料 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() 方法完全休息