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;
   }
}

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

希望，它会有所帮助！

Answer 2

您可以使用数据绑定。

HTML将如下所示：

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

现在请务必拉入FormsModule我们正在使用双向绑定。

课程看起来像这样。

todos: string[];
currentTodo: string

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

你甚至可以在addTodo函数中使用currentToDo而不是传入它：

todos: string[];
currentTodo: string

addTodo()
{
   this.todos.push(this.currentTodo);
   currentTodo = '';
   return false;
}

以下是对双向绑定所需的AppModule的更改：

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
})
export class AppModule { }

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

2 个答案: