【问题标题】：Clearing an input text field in Angular2清除Angular2中的输入文本字段
【发布时间】：2017-01-05 11:29:14
【问题描述】：

为什么当我尝试清除文本字段时此方法不起作用？

<div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
</div>


export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = '';
  }
}

我所期待的：因为我传递了一个搜索值的属性，所以当我单击按钮时，它应该获得在clearSearch() 函数中处理的更新值。

我还注意到，如果我将默认值设置为 searchValue，clearSearch() 函数可以工作，但只有一次。

请check my plunker。

【问题讨论】：

标签： angular

【解决方案1】：

1。第一种方法

您必须在此处分配 null 或空字符串

this.searchValue = null;
//or
this.searchValue = ' ';

Working Plunker

因为角度变化检测没有触发任何事件。所以你必须分配一些值 null 或带空格的字符串

2。第二种方法

使用[(ngModel)] 它应该与ngModel 一起使用。

为什么？

因为您使用 value 属性进行绑定，这只是属性绑定而不是事件绑定。所以 angular 不会运行更改检测，因为没有触发与 Angular 相关的事件。如果您绑定到一个事件，那么 Angular 会运行更改检测，并且绑定有效并且值应该是更改。

查看与ngModel相同的工作示例

Working Example with ngModel

【讨论】：

感谢您的回复和解释。第二种方法效果很好。使用空值，只在第一次工作。第二次尝试清理场地时，它没有用。你能给我一张这种行为的照片吗？
很高兴听到@Body，实际上在null值的情况下它第一次工作并更改输入字段中的值，但第二次它确实更改了值但不反映视图中的更改/template，因为当时没有通过angular运行变化检测，即没有事件绑定，希望这能清除一切
<div class="messages text-danger" *ngIf="input.errors?.required && input.touched">This field is Required!</div> 我也如何重置验证消息。使用上述方法，输入会被清除，但会显示消息。

【解决方案2】：

除了@PradeepJain 的回答中提到的两种方法之外，还有另外两种方法可以做到这一点。

如果您没有使用[(ngModel)] 指令并且也没有通过[value] 使用数据绑定，我建议不要使用这种方法，并且只能作为最后的手段使用这种方法。阅读this了解更多信息。

使用 ElementRef

app.component.html

<div>
      <input type="text" #searchInput placeholder="Search...">
      <button (click)="clearSearchInput()">Clear</button>
</div>

app.component.ts

export class App {
  @ViewChild('searchInput') searchInput: ElementRef;

  clearSearchInput(){
     this.searchInput.nativeElement.value = '';
  }
}

使用表单组

app.component.html

<form [formGroup]="form">
    <div *ngIf="first.invalid"> Name is too short. </div>
    <input formControlName="first" placeholder="First name">
    <input formControlName="last" placeholder="Last name">
    <button type="submit">Submit</button>
</form>
<button (click)="setValue()">Set preset value</button>
<button (click)="clearInputMethod1()">Clear Input Method 1</button>
<button (click)="clearInputMethod2()">Clear Input Method 2</button>

app.component.ts

export class AppComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });
  get first(): any { return this.form.get('first'); }
  get last(): any { return this.form.get('last'); }
  clearInputMethod1() { this.first.reset(); this.last.reset(); }
  clearInputMethod2() { this.form.setValue({first: '', last: ''}); }
  setValue() { this.form.setValue({first: 'Nancy', last: 'Drew'}); }
}

在 stackblitz 上试用Clearing input in a FormGroup

【讨论】：

嗨，在我的情况下，我使用[formGroup] 和formControlName 将数据发送到我的后端，但是我不能使用[(ngModel)] 或绑定[Value]。并且尝试使用 ElementRef 工作正常，但只有一个 input 在我的 DOM 中，你知道我正在寻找的另一种选择吗？
@jecorrales 我已经编辑了答案以包含您的用例。

【解决方案3】：

您可以更改输入值的参考，如下所示

<div>
    <input type="text" placeholder="Search..." #reference>
    <button (click)="reference.value=''">Clear</button>
</div>

【讨论】：

【解决方案4】：

这是针对反应式表单的解决方案。那么就不需要使用@ViewChild装饰器了：

  clear() {
    this.myForm.get('someControlName').reset()
  }

【讨论】：

【解决方案5】：

像这样的东西，没有按钮：

<input type="text" placeholder="Search..." [value]="searchValue" onblur="this.value=''">

【讨论】：

非常好它像这样对我有用 onblur="$event.target.value = ''"

【解决方案6】：

方法一。

使用`ngModel`。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Plunker 代码：Plunker1

方法二。

使用空值代替空引号。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Plunker 代码：Plunker2

【讨论】：

【解决方案7】：

HTML

<input type="text" [(ngModel)]="obj.mobile" name="mobile" id="mobile" class="form-control" placeholder="Mobile/E-mail" />

TS

onClickClear(){
   this.obj.mobile= undefined;
}

【讨论】：

【解决方案8】：

模板驱动方法

#receiverInput="ngModel" (blur)="receiverInput.control.setValue('')"

【讨论】：

【解决方案9】：

一些答案建议做以下事情

this.myForm.get('fieldName').reset();

虽然效果很好，但我个人喜欢直接访问字段对象，而不是进行基于字符串的查找。

this.myForm.controls.fieldName.reset();

【讨论】：

【解决方案10】：

在 Angular 中使用 Ionic 的反应形式：

在library.page.html：

<ion-input type="text" placeholder="Search" [formControl]="searchControl"></ion-input>
<ion-icon name="close-circle" (click)="clearSearchInput()"></ion-icon>

在 library.page.ts：

clearSearchInput() {
  this.searchControl.patchValue(false);
}

【讨论】：