2017-08-10 115 views
0

我有一個被拉多次的窗體。我需要能夠將表​​單上提交的標誌重置爲false,以便每次刪除可能從上次留下的任何可能的錯誤消息。Angular resetForm不適用於嵌套對象

我發現將提交的標誌設置爲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字段沒有正確綁定?

回答

1

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

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

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

如果您查看生成的模型,您將看到模型屬性爲firstNamelastName,根據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

+1

當我這樣做時,輸入框是空白的,而不是包含喬治華盛頓。 **注意:提交的標誌返回false就好了。這只是對於model.contact.lastName的雙向綁定而言。 – Scottie

+0

不是原始值,模型設置的新值。把它想象成一個人在網格上點擊一行。我想要更改模型以反映哪些值在該行上。但是如果該行有嵌套對象,它將不會更新輸入。這就是爲什麼resetForm需要一個模型。用新值重置表單域。我的plunkr只是一個簡化版本... – Scottie

+0

Re:update - 那麼沒有辦法在名稱字段中映射嵌套對象? – Scottie