Question

我只有一个输入字段，在提交时我想要清空它。任何人都可以建议我帮忙..

我的模板，

 <form class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate="novalidate">
  <textarea class="required sm-form-control" [formControl]="form.controls['comment']"  placeholder="Comment...."></textarea>
    <div class="form-group">
       <button class="button" type="submit" >Enter</button>
    </div> 
 </form>

我的ts，

onSubmit(form):any{
      form.commemt = '';
}

Answer 1

如前所述，您应该使用[(ngModel)]=""将数据绑定到表单控件

<form class="nobottommargin" (ngSubmit)="onSubmit()" #myForm="ngForm">
  <textarea class="required sm-form-control" [(ngModel)]="myFormValues?.comment" name="myTextArea" placeholder="Comment...."></textarea>
    <div class="form-group">
       <button class="button" type="submit" >Enter</button>
    </div> 
 </form>

然后您的onSubmit()功能应该正常运行

// The values to be bound to the form
myFormValues: any = {
    "comment": 'Default Value'
}

// The submit function can then access the 2-way bound values
onSubmit():void {
      // Do what you need to before reseting the values

      // Reset values for next time
      this.myFormValues.comment = '';
}

以下是Angular 2 Forms指南的链接。

Answer 2

当您使用ReactiveFormsModule和FormGroup时，您需要调用更像下面的内容。

您传入的对象是表单控件的简单{Key：Value}列表，它实际上并不与表单对象绑定。为此，它查看它是否具有由form.value表示的简单对象中的Key名称的控件，然后通过setValue将值设置为空白。请注意，您也可以从HTML模板中将表单作为参数传入，而它是FormGroup对象本身而不是更简单的KVP对象。

onSubmit(form):any{
  for(var prop in form) {
    if(this.form.controls.hasOwnProperty(prop)) {
      this.form.controls[prop].setValue('');
    }
  }
}

这是一个有效的Plunkr（注意让它返回false会阻止页面重新加载）：http://plnkr.co/edit/oGCsZr?p=preview

Answer 3

您可以使用ViewChild：

import {Component, ViewChild} from '@angular/core';
//.......

export class YourPage {
@ViewChild('commentContent') commentContent;

postComment(post) {
//.....
// after success
  this.commentContent.setValue('');
}

HTML

 <textarea ... #commentContent></textarea>

在angular2中提交后如何清空输入框

3 个答案: