Question

我输入输入字段如下：

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

我希望清除点击清除按钮的价值：

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

app.component.ts function :
filterName : string = null;
clearFilters() {

this.filterName = '';
}

请告诉我上面的错误，因为它不适合我。

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

<强>更新

如果是表格

最简单，最清晰的方式来清除表格及其错误状态（脏，等等）

this.form_name.reset();

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

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

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

form.reset（）方法仅适用于formControls重置调用

一名说明如何运作link的傻瓜。

Answer 2

我知道这是一个老话题，但我偶然发现了。

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

extends layout

block content
  h1 #{title}
  ul
    each article, i in articles
      li=article.title

非常确定这不会将表单设置回原始状态，但您可以使用server.js函数在同一函数中重置此表单

Answer 3

使用@ViewChild重置您的控件。

模板：

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

在代码中：

@ViewChild('filterName') redel:ElementRef;

然后您可以访问您的控件

this.redel= "";

Answer 4

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

Flux<Integer>

请注意（键）= 0 的重要性以及对课程输入的引用。

然后像这样重置它：

List<Integer>

Answer 5

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

这可以解决问题。

Answer 6

您应该使用双向绑定。没有ViewChild，因为它是相同的组件。

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

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

Answer 7

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

event.target.value = ""

Answer 8

要重置角度2中的值，请使用：

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

Answer 9

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

Answer 10

检查.ts中的@viewchild

@ViewChild('ngOtpInput') ngOtpInput:any;

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

以角度2

10 个答案: