以角度 2 重置输入值答案

【问题标题】：Reset input value in angular 2以角度 2 重置输入值
【发布时间】：2017-07-24 11:29:36
【问题描述】：

我有以下输入字段：

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

我想在单击清除按钮时清除值：

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

app.component.ts 功能：

filterName : string = null;
clearFilters() {

this.filterName = '';
}

请让我知道上面有什么问题，因为它不适合我。

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

【问题讨论】：

angular.io/guide/reactive-forms寻找重置部分

标签： angular

【解决方案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 = '';
}

更新

如果是表格

清除表单及其错误状态（dirty、prestine 等）的最简单、最干净的方法

this.form_name.reset();

PS：正如您提出的问题，您的问题代码中没有使用任何形式您正在使用简单的两天数据绑定，使用 ngModel 而不是表单控件。

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

一个 plunker 来展示这将如何工作link。

【讨论】：

我使用了多个过滤器，例如 filterName ,filterDept,
@Rush1312 你这是什么意思？多个过滤器
多个过滤器意味着我已使用 5 个输入作为过滤器，并希望在单击清除时将所有输入值清除为空白。顺便说一下，您的解决方案适用于我 form.reset()用过的形式。谢谢朋友。
另外，您能否告诉我 [(ngModel)]="filterName" 和 #filterName 之间的区别。表示我们应该什么时候使用。
[(ngModel)] 用于 Angular 中的双向绑定，其中 #filterName 用作临时模板引用变量，如 let filterName

【解决方案2】：

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

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

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

@ViewChild() input: ElementRef

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

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

【讨论】：

如果使用@ViewChild()，那么这将是正确的语法 - 它还会清除特定的表单字段

【解决方案3】：

使用 Angular 7 我需要创建一个包含文件描述的文件上传。

HTML：

<div>
File Description: <input type="text" (change)="updateFileDescription($event.target.value)" #fileDescription />
</div>

<div>
<input type="file" accept="*" capture (change)="handleFileInput($event.target.files)" #fileInput /> <button class="btn btn-light" (click)="uploadFileToActivity()">Upload</button>
</div>

这是组件文件

  @ViewChild('fileDescription') fileDescriptionInput: ElementRef;
  @ViewChild('fileInput') fileInput: ElementRef;

ClearInputs(){
        this.fileDescriptionInput.nativeElement.value = '';
        this.fileInput.nativeElement.value = '';
}

这样就可以了。

【讨论】：

【解决方案4】：

您可以使用 event.target.result 直接重置来自组件的输入。

event.target.value = ""

【讨论】：

【解决方案5】：

如果您想使用 HTML ONLY 清除输入，则可以执行以下操作：

<input type="text"
       (keyup)="0"
       #searchCollectorInput
       class="search-metrics"
       placeholder="Find">

请注意 (keyup)=0 的重要性以及当然对输入的引用。

然后像这样重置它：

<span *ngIf="searchCollectorInput.value.length > 0"
      (click)="searchCollectorInput.value = ''"
      class="fa fa-close" ></span>

【讨论】：

【解决方案6】：

使用@ViewChild 重置您的控制。

模板：

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

在代码中：

@ViewChild('filterName') redel:ElementRef;

然后你可以访问你的控件

this.redel= "";

【讨论】：

【解决方案7】：

为了重置 angular 2 中的值，请使用：

this.rootNode.findNode("objectname").resetValue();

【讨论】：

【解决方案8】：

您应该使用两种方式绑定。不需要 ViewChild，因为它是同一个组件。

因此，将 ngModel 添加到您的输入中，然后保留其余部分。这是您编辑的代码。

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >

【讨论】：

没有按钮你将如何重置值？你应该添加这个<button (click) = "click()">Click</button> click(){this.filterName = ''};
这个按钮已经在他的代码中声明了。没有包含在我的答案中。
您应该在答案中正确提及它，有些人很难正确解读它
我认为这很明显。但无论如何感谢您的提醒。 :)

【解决方案9】：

如果要在提交表单后清除所有输入字段，请考虑在FormGroup上使用reset方法。

【讨论】：

【解决方案10】：

检查您的 .ts 中的 @viewchild

@ViewChild('ngOtpInput') ngOtpInput:any;

如果您希望字段清晰，请在您的方法中设置以下代码。
```
yourMethod(){
    this.ngOtpInput.setValue(yourValue);
}
```

【讨论】：