Angular2：添加值后清除文本框

Question

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

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

在组件中，我有以下用于 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

Angular2 : Clear the text box once the value is added