Angular resetForm不適用於嵌套對象

Question

我有一個被拉多次的窗體。我需要能夠將表​​單上提交的標誌重置爲false，以便每次刪除可能從上次留下的任何可能的錯誤消息。

我發現將提交的標誌設置爲false的唯一方法是使用ngForm.resetForm(model)方法。

這樣做效果不錯，只是它不會將ngModel綁定到嵌套在頂層模型中的任何對象。

給出的下列對象：

model: { 
    firstName: 'John', 
    contact: { 
     lastName: 'Smith' 
    } 
} 

和下面的輸入：

<input type='text' name='firstName' [(ngModel)]='model.firstName' /> 
<input type='text' name='lastName' [(ngModel)]='model.contact.lastName' /> 

第一時間的形式負載，一切正確顯示。

但是，如果您提交表格，然後致電this.myForm.resetForm(this.model)，它將不會綁定model.contact.lastName。它確實很好地綁定了model.firstName。

我已經包括一個plunkr，說明問題here。

有沒有什麼辦法可以在resetForm之外重置提交的標誌？或者有人可以解釋爲什麼在調用resetForm時model.contact.lastName字段沒有正確綁定？

Answer 1

使用表單時，務必記住它有自己的模型，該模型表示窗體上的窗體和控件。

當使用反應形式時，我們用FormBuilder創建這個「模型」。

當使用模板驅動的表單時，將根據具有name屬性的HTML元素自動爲我們創建此「模型」。

如果您查看生成的模型，您將看到模型屬性爲firstName和lastName，根據name屬性。

Data Model: { "firstName": "John", "contact": { "lastName": "Smith" } } 
Form's Model: { "firstName": "John", "lastName": "Smith" } 

這就是爲什麼它無法找到信息......因爲它的內部表單模型與您的數據模型不匹配。

嘗試添加以下內容到plunker：

{{myForm.value | json}}<br/> 

而且你會看到生成的表單的模式。

您可以使用表單組，這樣實現排料：

<input type='text' name='firstName' [(ngModel)]='model.firstName' /><br /> 
    <div ngModelGroup="contact"> 
    <input type='text' name='lastName' [(ngModel)]='model.contact.lastName' /><br /> 
    </div> 
    <br /> 

生成的表單模型接着匹配你的數據模型：

Data Model: { "firstName": "George", "contact": { "lastName": "Washington" } } 
Form's Model: { "firstName": "George", "contact": { "lastName": "Washington" } } 

這裏是更新plunker：https://plnkr.co/edit/AqLxE7kJsCAVIOJHBJtt?p=preview