如何將Angular4的FormGroup重置爲原始狀態？

我正在學習Angular4更具體的反應形式。我正在運行英雄演示，並且遇到了一些問題。如何將Angular4的FormGroup重置爲原始狀態？

對此Plunker我們必須選擇一個超級英雄，它會顯示英雄的地址。我爲每個地址添加了一個重置按鈕，但是當我點擊重置地址時，它會重置所有內容。

在這個例子中，我們有：

createForm() { //Set up form and array of addresses 
    this.heroForm = this.fb.group({ 
     name: '', 
     secretLairs: this.fb.array([]), 
     power: '', 
     sidekick: '' 
    }); 
    } 

    //Function to revert changes 
    revert() { this.ngOnChanges(); } 

    //This function will set the name from original object 
    ngOnChanges() { 
    this.heroForm.reset({ 
     name: this.hero.name 
    }); 

    //It will reload the form array with original values 
    this.setAddresses(this.hero.addresses); 
    } 

    //Create new formgroups and add to formArray 
    setAddresses(addresses: Address[]) { 
    const addressFGs = addresses.map(address => this.fb.group(address)); 
    const addressFormArray = this.fb.array(addressFGs); 
    this.heroForm.setControl('secretLairs', addressFormArray); 
    }

這是確定的，它的工作原理，但它會重置整個表格。例如，Whirlwind有兩個地址。我添加了一個新地址，之後，我對第一個地址進行了更改。我犯了一個錯誤，想要獲得原始值，我點擊重置按鈕，它將刪除我的新地址，並且它將重置表單上的所有數據。

如何重新設置每個地址而不是整個表單？

感謝

來源

2017-08-31 UncleFester

見你爲什麼要呼籲改變復位？我不確定我是否理解你想達到的目標。用例如類似的用戶故事呢？發生了什麼，你期望發生什麼？ –

我很抱歉，如果它錯過了什麼。我想取消所做的更改並加載以前的值。例如，它加載第一個地址，然後我開始在那裏輸入內容。當我點擊重置時，它將顯示該特定地址的原始值，而不是整個表單。 – UncleFester

您可以使用value或getRawValue()初始化後，讀出值。

在reset()之後，您可以使用setValue()以前的讀取值重新設置初始值。

也

來源

2017-08-31 20:58:58

我在想，我可以通過數組中的項目來做到這一點，但似乎我們確實需要重新綁定整個FormGroup嗎？ – UncleFester

根據我所看到的，您可以使用'reset'並傳入所有原始數據......或者您可以使用'setValue'或'patchValue'。另外...我知道'reset' does not *當前在重置時創建正確數量的FormArray元素。在Angular github回購中發佈了這個問題。如果你真的只想重置一個值，那麼'patchValue'可能就是你想要的。 – DeborahK

如果您有興趣，我有一個使用反應形式的示例應用程序：https：//github.com/DeborahK/Angular2-ReactiveForms（在APM文件夾中）。每次用戶選擇要編輯的新項目時，它都使用'patchValue'來更新表單上的數據。您可以使用類似的技術來重置。 – DeborahK

如何將Angular4的FormGroup重置爲原始狀態？

回答

相關問題