77

<input type="text">要素のリストを表示するフォームがあります。それらはすべて、フォームが汚れるまで無効になる共通の保存ボタンを共有しています。次に、ユーザーが保存ボタンをクリックすると、データがサーバーに送信されます。サーバーがデータを正常に保存した場合は、フォームを元の状態にリセットしたいのですが、ユーザーが必要に応じてデータをさらに編集できるように、フォーム内のすべてのデータを保持したいと考えています。

検索したら方法がわかりましたNgForm.reset()。これにより、フォームが元の状態に設定されますが、残念ながらフォームもクリアされます。リセット メソッドには値パラメーターがあるようですが、それが何をするのかわかりません。それにもかかわらず、私はデータを消去したくありません。

私も試しmyForm.pristine = trueてみましたが、これにより何らかの理由でページがリロードされます。

これは、問題を示す plunkrです。

4

7 に答える 7

37

現時点では、2 つの解決策を提案できます。resetフォームのメソッドには次の署名があり、フォームの値を最初の引数として受け入れるため、最初 のものはあなたが提案したものに本当に近いです:

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

送信ハンドラーでは、最後の状態のコピーをキャプチャします。

const { myForm: { value: formValueSnap } } = this;

そして、リセット自体を行います：

this.myForm.reset(formValueSnap, false);

フォームをリセットする可能性がなかった時代からの別のオプションは、各コントロールをとしてマークしpristine、データを保持するヘルパー メソッドを作成することです。リセットの代わりに、同じ送信ヘルパーで呼び出すことができます。

private _markFormPristine(form: FormGroup | NgForm): void {
    Object.keys(form.controls).forEach(control => {
        form.controls[control].markAsPristine();
    });
}

更新されたplunkrへのリンク。

于 2016-11-20T19:29:59.777 に答える