如何在角色2提交后清除表格

发布时间：2020-12-17 08:15:53 所属栏目：安全来源：网络整理

导读：我有一些简单的角度2组件与模板。提交后如何清除表单和所有字段？我无法重新加载页面。在使用date.setValue(”)字段设置数据后，触摸。 import {Component} from 'angular2/core';import {FORM_DIRECTIVES,FormBuilder,ControlGroup,Validators,Control} fr

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

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>

&GT = RC.6

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

[formGroup]="myForm"

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

&GT = RC.5

form.reset();

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

&LT = 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);
  }
}

也可以看看

> https://github.com/angular/angular/issues/6196
> https://github.com/angular/angular/issues/6169
> https://github.com/angular/angular/issues/4933
> https://github.com/angular/angular/issues/4914
> https://github.com/angular/angular/issues/6371

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!