重置角度2的输入值 [英] Reset input value in angular 2

问题描述

我有以下输入字段:

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

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

I want to clear value on click of clear button :

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

app.component.ts 函数:

filterName : string = null;
clearFilters() {

this.filterName = '';
}

请让我知道上面有什么问题，因为它对我不起作用.

Please let me know whats wrong with above as its not working for me.

这是jsfiddle https://jsfiddle.net/8fw8uq3x/

Here the jsfiddle https://jsfiddle.net/8fw8uq3x/

推荐答案

您可以执行以下操作

    <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 = '';
}

更新

如果是表格

清除表单及其错误状态(脏污，预设等)的最简单，最干净的方法

easiest and cleanest way to clear forms as well as their error states (dirty , prestine etc)

this.form_name.reset();

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

for more info on forms read out here

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

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

PS: As you asked question there is no form used in your question code you are using simple two day data binding using ngModel not with formControl.

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

form.reset() method works only for formControls reset call

一个显示它如何工作的插件链接.

A plunker to show how this will work link.

这篇关于重置角度2的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！