データを消去せずにフォームを初期化する

Question

私は<input type="text">要素のリストを表示するフォームを持っています。それらはすべて共通の保存ボタンを共有し、フォームが汚れるまで無効になります。次に、ユーザーが保存ボタンをクリックすると、データがサーバーに送信されます。サーバーがデータを正常に保存していれば、フォームを初期状態に戻したいが、すべてのデータをフォームに保存して、ユーザーが選択すればさらにデータを編集できるようにしたい。

検索後、私はNgForm.reset()メソッドを見つけました。これはフォームを初期状態に設定しますが、残念ながらフォームをクリアします。 resetメソッドはvalueパラメータを持っているようですが、それが何であるかを知ることはできません。それにもかかわらず、私はデータを消去したくない。

また、myForm.pristine = trueも試しましたが、何らかの理由でページのリロードが発生します。

Here is a plunkr demonstrating the problem。

Answer 1

現時点では、2つの解決策を提案できます。フォームのreset方法は、次のシグネチャを有し、第1引数としてフォームの値を受け入れるよう 最初のものは、あなたが提案してきたものには本当に近いです：提出ハンドラで

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

、我々は最後の状態のコピーをキャプチャします：

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

、リセット自体の操作を行います。

this.myForm.reset(formValueSnap, false); 

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

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

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

Answer 2

あなたが探しているのはmyForm.markAsPristine()です。あなたは、テンプレート駆動型フォームを使用することが起こると、あなたのコンポーネントでこのようなものがある場合は

Answer 3

： @ViewChild('myForm') myform: any;

をmarkAsPristine()は、フォームのフォームプロパティの関数であること私を見つけました。したがって、this.myform.form.markAsPristine()になります。

他の人がmarkAsPristine()と定義されていない場合に備えて、これを追加したいと思っています。

Answer 4

私はformプロパティで）（markAsPristineを発見していないが、私はtrueに設定することができ_pristineプロパティ、this.myForm['form']._pristineを発見しました。

@ViewChild('myForm') myForm: ElementRef; 
this.myForm['form']._pristine = true; 

Answer 5

は、私は私が私の方法でこれを行ってsolveが思う：

form.controls['contato'].reset();