javascript - 为什么我的表单没有使用 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"或 "user.lastname"或 "user.address.street" 时，它有效吗？如果我按照上述方式这样做，我看不出我总共需要 ngModelGroup 的原因。

我不确定如何为嵌套对象正确使用ngModelGroup。

下面是 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 对于为表单数据提供与数据模型相同的形状非常有用。但它对您绑定(bind) [(ngModel)] 的属性没有影响(这些属性可以是您想要的任何属性)。