如何實現自動保存表單？

Question

我計劃在FormBuilder的幫助下使用ReactiveForms。我想知道自動保存可以實施的方式。我需要以下行爲：

頁面上沒有提交按鈕。當用戶在表單中進行更改時，數據會自動保存併發送到服務器。

這怎麼能在Angular2中實現？

謝謝。

Answer 1

您可以訂閱表格的valueChanges事件。然後只需檢查表單是否有效，然後在每次更改時保存數據。

this.form = new FormGroup({...}); 
this.form.valueChanges.subscribe(val => { this.saveMyFormValue(val); }); 

valueChanges是抽象類AbstractControl上的一個屬性。 FormGroup,FormControl和FormArray全部實現AbstractControl，這意味着如果您願意，您也可以訂閱此事件以獲取單獨的表單控件。

Answer 2

以下是我們目前如何在React Todos example app中實現該目標。

此外，據我所知，您應該能夠聽取onBlur事件 - 這與onFocus相反。還有一個名爲onChanged的事件，可能對您的特定用例有幫助。

Answer 3

我將下面的代碼放在我的Profile Component的構造函數中。 我使用延遲方法可用於給自動保存一點時間。

然後，如果表單有效，並且表單很髒，我調用saveProfile方法並重置表單。

下面是代碼：

this.form = this.formBuilder.group({ 
    firstName: ['', Validators.required], 
    lastName: ['', Validators.required], 
}); 

this.form.valueChanges 
    .delay(6000) 
    .subscribe(() => { 
    if (this. form.valid && this. form.dirty) { 
     this.saveForm(); 
     this.form.reset() 
    } 
    }); 

我希望這有助於。如果可能的話，也打開一個更好的方式來做到這一點。