Angular2：添加值后清除文本框

Question

如何在单击angular2中的按钮后添加值后清除文本：以下是模板文件

<div>
  <label>Task:</label> <input #taskNameRef/>
  <button (click)="addTask(taskNameRef.value);">Add</button>
</div>

在Compoment中，我有以下addTask函数的代码

addTask(name:String): void {
    name = name.trim();
    if (!name) { return; }
    this._taskService.create(name);
}

注意：我是angular2的新手。

Answer 1

始终将输入表单包装在表单中，因为angular会为您提供很大的灵活性来处理这种情况。

<form #yourFormName="ngForm">
  //Input form code
</form>

你必须在命令性地清除所有标志，你可以通过在调用addTask（）方法之后调用表单的reset（）方法来完成。

<button type="button" (click)="addTask(); yourFormName.reset()">Add Task</button>

有关详细信息，请转到Angular Form