更新後的角度4重置表單 - 保持ngModel值（使用ngForm）

我覺得這應該很簡單，但我找不到任何東西（至少沒有大量的開銷編碼），我的特殊用例。基本上我有一個不是模式的更新配置文件頁面。一旦用戶更新，我希望表單重新恢復到原始狀態並使用當前值，以防用戶想要進行更多編輯。更新後的角度4重置表單 - 保持ngModel值（使用ngForm）

我使用ngForm的reset()（也試過resetForm()）。這將它重置爲原始等，但它也會刪除輸入中的所有值。在我使用的每個輸入上使用[(ngModel)]="userRecord.phone"等。我的userRecord仍然正確。

是否有簡單的方法來保留或取回重置後的模型值？

onSubmit(event, profileForm: NgForm) { 
    event.preventDefault(); 

    const myTempVar = this.userRecord; 
    this.userRecord.put() 
    .catch((e) => { 
     this.isProcessing = false; 
     return Observable.of(false); 
    }) 
    .subscribe((response) => { 
     this.displayConfirmation = 'Profile has been updated successfully.' 
     this.isProcessing = false; 
     this.userRecord = myTempVar; 
    }, (err) => { 
     console.log('There was an error saving', err); 
     this.displayError = 'Unknown error. Please refresh this page and try again.' 
     this.isProcessing = false; 
    }); 
}

如果它有助於可視化，這裏是提交之前的原始畫面：

這被提交後，如果我做一個ngForm reset()：

這如果我不做重置。我希望它是這樣的，除了還質樸，並得到提交按鈕再次啓用（雖然現在我注意到，如果我做了復位是沒有發生，反正:-(）。

來源

2017-07-25 Robin Schaaf

當用戶提交from時，是否將新值應用於'userRecord'變量？ –

是的，完全是約翰 - 不希望數據發生變化。 –

Praveen，提交後我不會將任何新值應用於userRecord，但我可以從數據庫刷新我想。 –

之前你提交表單，你可以克隆你的表單數據到一些TMP對象：

tmpFormData: someType = Object.assign({}, currentData);

然後你做reset()後，你可以做

來源

2017-07-25 18:38:09

謝謝！我沒有ngForm'patchValue（）'，但'setValue（）'做了竅門！ –

執行此提交成功後

。

這應該重新分配模型的價值。

來源

2017-07-25 18:41:03

不幸的是，這並沒有工作，我不知道在這一點上，它知道刷新ngModel值？（實際上不知道爲什麼沒有工作，似乎應該有！ –

你可以分享你的代碼？ –

當然，增加了問題 –

更新後的角度4重置表單 - 保持ngModel值（使用ngForm）

回答

相關問題