为什么我的表单不使用ngModelGroup填充数据？

问题描述：

我有一个下面的表格，我使用ngModelGroup来分组输入。为什么我的表单不使用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

答

ngModelGroup，您可以通过引入“子属性”字形从表单接收的数据。

随着ngModelGroup="user"在你的模板，这里就是form.value的样子：

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

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

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

ngModelGroup可以是有用的为表单数据提供与数据模型相同的形状。但它对你绑定[(ngModel)]的属性没有影响（这些属性可以是任何你想要的）。

为什么我的表单不使用ngModelGroup填充数据？

相关推荐