在Angular 4中提交表单后清除输入框

Question

我想在提交表单后清除输入框.

这是我的app.component.ts文件:

todos: string[];

addTodo(todo)
{
   this.todos.push(todo);
   return false;
}

这是我的app.component.html文件

<form (submit)="addTodo(todo.value)">
<input type="text" #todo>
<ul>
<li *ngFor="let todo of todos">{{todo}}</li>
</ul>

当我在输入框中填写待办事项,然后按键盘上的回车键或返回键时,它应自动清除我的输入框.

Answer 1

在app.component.ts文件中更改以下代码:

import { Component,ViewChild,ElementRef } from '@angular/core';
export class AppComponent {

   @ViewChild("todo") el : ElementRef
   addTodo(todo)
   {
       this.todos.push(todo);
       this.el.nativeElement.value = "";
       return false;
   }
}

通过使用此功能,在提交表单文本框后,将清除值.

希望,它会帮助你!