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)]的属性没有影响（这些属性可以是你想要的任何东西）。

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

1 个答案: