以角度2重置输入值

Question

我输入输入字段如下:

<input mdInput placeholder="Name" #filterName name="filterName" >

我想清除点击清除按钮的价值:

<button (click)="clearFilters()">Clear</button>

请告诉我上面的错误,因为它不适合我.

这里的jsfiddle https://jsfiddle.net/8fw8uq3x/

Answer 1

你可以做这样的事情

    <input  placeholder="Name" #filterName name="filterName" />
    <button (click) = "filterName.value = ''">Click</button>

要么

模板

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >
<button (click) = "clear()'">Click</button>

在组件中

filterName:string;
clear(){
this.filterName = '';
}

更新

如果是表格

清除表单以及错误状态(脏,prestine等)的最简单,最干净的方法

this.form_name.reset();

有关表格的更多信息,请阅读此处

https://angular.io/docs/ts/latest/guide/forms.html

PS:正如您提出的问题,您的问题代码中没有使用任何表单,您使用的是使用ngModel而不是formControl的简单的两天数据绑定.

form.reset()方法仅适用于formControls重置调用

一个提示如何工作链接的 plunker .

Answer 2

我知道这是一个旧线程，但我只是偶然发现。

所以继承人我会怎么做，使用输入字段上的本地模板变量，您可以设置输入的值，如下所示

<input mdInput placeholder="Name" #filterName name="filterName" >

@ViewChild() input: ElementRef

public clear() {
    this.input.NativeElement.value = '';
}

很确定这不会将表单设置回原始状态，但您可以使用该markAsPristine()功能在同一功能中重置它

Answer 3

使用 @ViewChild重置控制。

模板：

<input mdInput placeholder="Name" #filterName name="filterName" >

在代码中：

@ViewChild('filterName') redel:ElementRef;

然后你可以访问你的控件

this.redel= "";