首页 文章

如何在Angular 2中提交后清除表单？

提问于
浏览 次
47

我有一些简单的角度2组件与模板 . 提交后如何清除表格和所有字段？我无法重新加载页面 . 使用 date.setValue('') 字段设置数据后，stil touched .

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

装载-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>
angular angular2-forms

10 回答

  • 3

    另见https://angular.io/docs/ts/latest/guide/reactive-forms.html（第"reset the form flags"节）

    >=RC.6

    在RC.6中，应该支持更新表单模型 . 创建新表单组并分配给 myForm

    [formGroup]="myForm"

    也将得到支持（https://github.com/angular/angular/pull/11051#issuecomment-243483654）

    >=RC.5

    form.reset();

    在新表单模块（> = RC.5）中， NgForm 具有 reset() 方法，并且还支持表单 reset 事件 . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

    <=RC.3

    这将有效：

    onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

    也可以看看

    回复于
  • 19

    从Angular2 RC5开始， myFormGroup.reset() 似乎可以解决问题 .

    回复于
  • 81

    要在提交后重置表单，只需调用 this.form.reset() 即可 . 通过调用 reset() 它将：

    • 将控件和子控件标记为 pristine .

    • 将控件和子控件标记为 untouched .

    • 将控件和子控件的值设置为 custom value 或 null .

    • 更新 value/validity/errors 受影响的各方 .

    请找到pull request以获得详细答案 . 仅供参考，此PR已合并至2.0.0 .

    希望这可以有所帮助，如果您对Angular2表单有任何其他问题，请告诉我 .

    回复于
  • 6
    import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}
    回复于
  • 11

    对于角度版本4，您可以使用：

    this.heroForm.reset();

    但是，您可能需要一个初始值，如：

    ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

    在对象引用中解决null问题很重要 .

    参考link，搜索"reset the form flags" .

    回复于
  • 4

    有一个新的讨论（https://github.com/angular/angular/issues/4933） . 到目前为止，只有一些黑客可以清除表单，比如在提交后重新创建整个表单：https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

    回复于
  • 2

    在.ts文件中拨打电话 clearForm();

    尝试使用下面的示例代码段来清除表单数据 .

    clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}
    回复于
  • 0

    我发现了另一个解决方它有点hacky但它在angular2世界广泛使用 .

    由于* ngIf指令删除了表单并重新创建它，因此可以简单地向表单添加* ngIf并将其绑定到某种 formSuccessfullySent 变量 . =>这将重新创建表单，从而重置输入控件状态 .

    当然，您还必须清除模型变量 . 我发现为表单字段设置特定的模型类很方便 . 这样我可以重置所有字段，就像创建此模型类的新实例一样简单 . :)

    回复于
  • 1

    嗯，现在（2017年1月23日，角度为2.4.3）我的工作方式如下：

    newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>
    回复于
  • -2
    resetForm(){
    ObjectName = {};
}
    回复于

相关问题