如何在 Angular2 中提交表单后清除任何输入类型（例如 text/password 等）的 values/strings

Question

下面是 HTML、

的代码片段

<div>
  <form class="form-horizontal" role="form" (ngSubmit)="createUser(Username.value, Password.value)">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <input type="text" class="form-control" placeholder="Username..." #Username required>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <input type="password" class="form-control" placeholder="Password..." #Password autocomplete="off" required>
    </div>
    <div>
      <button type="submit" class="btn btn-primary">Add</button>
    </div>
  </form>
</div>

以下为.ts文件

import {Component} from '@angular/core';

@Component({
  selector: 'create-component',
  templateUrl: 'app/components/user-create.component.html'
})
export class CreateUserComponent {

  constructor() {
  }

  private createUser(Username, Password) {
    this.myService.createUser(Username, Password).subscribe(
        success => {
            console.log('User is created');
        },
        error => console.log('error')
    );
  }
}

所以我的要求是在创建每个用户后我想通过使用单向绑定清除文本框值，我知道还有另一种方法可以创建一个方法来使用声明的数据成员将值设置为“”空字符串class 里面。这里不想使用任何变量，在我的代码中，我使用一种方式绑定（即输入参考，例如#Username）只是将输入值从 UI.

发送到我的 createUser 函数

Answer 1

如果您使用的是 angular2 表单，您现在无法重置它，但中共享了解决方法。

编辑根据评论：我们在 formGroup 中有重置功能访问下面的 link :

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#reset-anchor

Answer 2

感谢 link，下面是我的代码的工作变更集，用于在提交表单后重置控件值。 1. 在 app.module.ts 文件中导入库， import {FormsModule, ReactiveFormsModule } from '@angular/forms' 2. 将表单组添加到您的表单标签中，例如 <form class="form-horizontal" role="form" (ngSubmit)="createUser(Username.value, Password.value)" [formGroup]="myForm">。 3. 将 'formControlName' 属性添加到您的输入控件， <input type="text" class="form-control" placeholder="Username..." formControlName="Username" #Username required> 与其他输入控件相同。 4. 用户 component.ts 文件的变化， import {FormGroup, FormControl} from '@angular/forms'; 并在您的 constructor() 或 ngOnInit() 事件中为 FormGroup 启动实例， this.myForm = new FormGroup({ Username: new FormControl(), Password: new FormControl() });。 5. 最后在任何你想重置控件值的地方调用 reset 方法， this.myForm.reset();

如何在 Angular2 中提交表单后清除任何输入类型（例如 text/password 等）的 values/strings

How to clear values/strings for any input type such as text/password etc after submitting form in Angular2

angular2-forms

angular