爲什麼我的表單不使用ngModelGroup填充數據？

Question

我有一個下面的表格，我使用ngModelGroup來分組輸入。

<form #form="ngForm" (ngSubmit)="submit(form.value)"> 
    <fieldset ngModelGroup="user"> 
     <div> 
      <label>Firstname:</label> 
      <input type="text" name="firstname" [(ngModel)]="firstname"> 
     </div> 
     <div> 
      <label>Lastname:</label> 
      <input type="text" name="lastname" [(ngModel)]="lastname"> 
     </div> 
    </fieldset> 
    <fieldset ngModelGroup="address"> 
     <div> 
      <label>Street:</label> 
      <input type="text" name="street" [(ngModel)]="street"> 
     </div> 
     <div> 
      <label>Zip:</label> 
      <input type="text" name="zip" [(ngModel)]="zip"> 
     </div> 
     <div> 
      <label>City:</label> 
      <input type="text" name="city" [(ngModel)]="city"> 
     </div> 
    </fieldset> 

    <button type="submit">Submit</button> 
</form> 

當我映射我的[(ngModel)] = "user.firstname" or "user.lastname" or "user.address.street"它的作品？如果我以上述方式進行操作，則我看不出爲什麼我總共需要ngModelGroup。

我不知道如何正確使用ngModelGroup爲nested objects.

下面是plunkr： https://plnkr.co/edit/Y4bjFh6sjtvdzkUWciid?p=preview

Answer 1

ngModelGroup，您可以通過引入「子屬性」字形從表單接收的數據。

隨着ngModelGroup="user"在你的模板，這裏就是form.value的樣子：

{ 
    "user": { 
    "firstname": "foo", 
    "lastname": "bar" 
    }, 
    // ... 
} 

沒有ngModelGroup="user"在你的模板，form.value將是：

{ 
    "firstname": "foo", 
    "lastname": "bar", 
    // ... 
} 

ngModelGroup可以是有用的爲表單數據提供與數據模型相同的形狀。但它對你綁定[(ngModel)]的屬性沒有影響（這些屬性可以是任何你想要的）。