111

テンプレート付きの単純なAngular 2コンポーネントがあります。送信後にフォームとすべてのフィールドをクリアする方法. ページをリロードできません。フィールドでデータを設定した後date.setValue('')は stiltouchedです。

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
    }
}

ロードフォーム.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>
4

15 に答える 15

167

https://angular.io/docs/ts/latest/guide/reactive-forms.html (「フォーム フラグのリセット」セクション)も参照してください。

>=RC.6

RC.6 では、フォーム モデルの更新をサポートする必要があります。新しいフォーム グループを作成して割り当てるmyForm

[formGroup]="myForm"

もサポートされます ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

>=RC.5

form.reset();

新しいフォームモジュール (>= RC.5)NgFormにはメソッドがあり、フォームイベント reset()もサポートしています。https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179reset

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

こちらもご覧ください

于 2016-01-12T11:10:15.720 に答える
37

Angular2 RC5 の時点で、うまくいくmyFormGroup.reset()ようです。

于 2016-08-21T23:54:26.893 に答える
13

送信後にフォームをリセットするには、単に を呼び出すだけですthis.form.reset()。呼び出すreset()ことにより、次のことが行われます。

  1. コントロールと子コントロールをpristineとしてマークします。
  2. コントロールと子コントロールをuntouchedとしてマークします。
  3. コントロールと子コントロールの値をカスタム値またはnullに設定します。
  4. 影響を受ける当事者の値/有効性/エラーを更新します。

詳細な回答については、このプル リクエストを見つけてください。参考までに、この PR は既に 2.0.0 にマージされています。

Angular2 Forms に関して他に質問がある場合はお知らせください。

于 2016-09-21T22:58:38.183 に答える
12

これがAngular 7.3でのやり方です

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

電話する必要はありませんでしたform.clearValidators()

于 2019-06-12T01:08:53.633 に答える
3

これに関する新しい議論があります ( https://github.com/angular/angular/issues/4933 )。これまでのところ、送信後にフォーム全体を再作成するなど、フォームをクリアできるハックはいくつかあります: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

于 2016-06-04T06:38:15.580 に答える
1

別の解決策を見つけました。少しハッキーですが、angular2 の世界で広く利用できます。

*ngIf ディレクティブはフォームを削除して再作成するため、 *ngIf をフォームに追加して、何らかのformSuccessfullySent変数にバインドするだけです。=> これにより、フォームが再作成されるため、入力コントロールのステータスがリセットされます。

もちろん、モデル変数もクリアする必要があります。フォーム フィールドに特定のモデル クラスがあると便利であることがわかりました。このようにして、このモデル クラスの新しいインスタンスを作成するのと同じくらい簡単に、すべてのフィールドをリセットできます。:)

于 2016-08-30T19:39:32.100 に答える