web-dev-qa-db-ja.com

Angular 2に送信後にフォームをクリアする方法

私はテンプレートを使用していくつかの単純な角度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
    }
}

loading-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>
angularangular2-forms
54
masel.popowo

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()メソッドを持ち、フォームの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);
  }
}

また見なさい

93
Günter Zöchbauer

Angular 2 RC5では、myFormGroup.reset()がうまくいっているようです。

24
ebhh2001

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

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

詳細な回答は--- pull request をご覧ください。ちなみに、このPRはすでに2.0.0に統合されています。

Angular2フォームに関して他に質問がある場合は、これが役に立ちます。

13
JayKan
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();
    }
}
8
Rahul Tiwari

角度バージョン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問題を解決することが重要です。

reference link 、 "フォームフラグをリセットする"を検索してください。

6
Lucas Selliach

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

3
wawka

.tsファイルでclearForm();を呼び出します。

以下のコード例のようにして、フォームデータを消去してください。

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'Zip': ''
     });
}
3
mkumar0304

私は別の解決策を見つけました。それは少しハックですが、それはangle2の世界で広く利用可能です。

* ngIfディレクティブはフォームを削除して再作成するので、* ngIfをフォームに追加してそれをある種のformSuccessfullySentvariableにバインドするだけです。 =>これによりフォームが再作成され、入力制御ステータスがリセットされます。

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

1
Benjamin Jesuiter

フム、今（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>
0
adrhc

これが私のやり方です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()を呼び出す必要はありませんでした

0
Mauricio Gracia Gutierrez