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

Posted 2023-03-07

【中文标题】在Angular 4中提交表单后清除输入框

【英文标题】：Clear the input box after submitting the form in Angular 4

【发布时间】：2017-12-13 17:54:49

【问题描述】：

我想在提交表单后清空输入框。

这是我的 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>

当我在输入框中填写待办事项，然后按键盘上的 enter 或 return 键时，它应该会自动清除我的输入框。

【参考方案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;
   

使用这个，提交表单后文本框的值会被清除。

希望对你有帮助！

【讨论】：

工作就像一个魅力。

【参考方案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  

【讨论】：

感谢您的贡献，我尝试了您的代码，但它弹出一个错误，像这样 无法绑定到“ngModel”，因为它不是“输入”的已知属性

您看到我的笔记了吗：Be sure to pull in the FormsModule now that we are using two-way binding. 您看到的消息是因为您没有将 FormsModule 拉入您的 AppModule。我也会发布该代码。

是的，我在 app.module.ts 中导入了 FormsModule，此外，当我们使用输入字段时，我们还应该在 ngModule 中包含 name 属性，如下所示，<input [(ngModel)]="firstname" name="firstname">

啊，是的。谢谢你抓住那个。我会在上面修复我的代码，以防其他人看到它。