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

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

Answer 1

如果您使用的是angular2表单，则无法将其重置为现在，但this answere中共享了解决方法。

编辑根据评论：我们在formGroup中重置了函数请访问以下链接：

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

Answer 2

感谢您提供此链接，以下是我的代码的工作更改集，以便在提交表单后重置控件值。 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.添加＆＃39; formControlName＆＃39;属性到您的输入控件， <input type="text" class="form-control" placeholder="Username..." formControlName="Username" #Username required>和其他输入控件相同。 4.用户component.ts文件的更改， import {FormGroup, FormControl} from '@angular/forms'; 并在构造函数（）或ngOnInit（）事件中启动FormGroup的实例， this.myForm = new FormGroup({ Username: new FormControl(), Password: new FormControl() });。 5.最后调用重置方法，只要你想重置控制值， this.myForm.reset();

在Angular2中提交表单后，如何清除任何输入类型（如文本/密码等）的值/字符串

2 个答案: