在 Angular 2 中，提交表单未获得那些类对象的值，该类的对象属于其他类

Question

类就像，包含另一个类的对象的用户类，即地址类，如下所示：

用户.ts

export class User {
constructor(
    public fname : string,
    public lname : string,
    public address : Address){}
}

地址.ts

export class Address {
constructor(
    public address1 : string,
    public address2 : string){}
}

包含表单的模板就像

<form id="user" (ngSubmit)="onSubmit(f.value)" #f="ngForm">     
        <label>First Name :</label><br>
        <input  type="text" 
                id="first-name"
                [ngModel]="userInfo.fname"
                name="fname"
                #fname="ngModel"><br>
        <label>Last Name :</label><br>
        <input  type="text" 
                id="last-name"
                [ngModel]="userInfo.lname"
                name="lname"
                #lname="ngModel"><br>
        <label>Address1 :</label><br>
        <input  type="text" 
                id="address1"
                [ngModel]="userInfo.address.address1"
                name="address1"
                #address1="ngModel"><br>
        <label>Address2 :</label><br>
        <input  type="text" 
                id="address2"
                [ngModel]="userInfo.address.address2"
                name="address2"
                #address2="ngModel"><br>
        <button id="submit"  type="submit" ></button>
    </form>

和包含此模板的组件具有以下方法：

this.userInfo = new User("","",new Address("",""));     
onSubmit(model: User) {
  console.log("model:"+model.fname);//output correct
  console.log("model:"+model.lname);//output correct
  console.log("model:"+model.address.address1);//output error
}

当我们提交此表格时，

对于前两个控制台，它显示输出

但在最后一个控制台中，它抛出了

异常：./用户组件类用户组件 - 内联模板：10：1 中的错误由以下原因引起：无法读取未定义的属性"address1">

尝试更改"名称"属性，例如

name = "address1"或

name = "address.address1"

但得到同样的错误

Answer 1

有

针对此类目的的特殊指令 - ngModelGroup .它在窗体中创建一个子组。

所以我会用ngModelGroup绑定将您的Address fieds 包裹在div中，如下所示：

<div ngModelGroup="address">
  <label>Address1 :</label><br>
  <input  type="text" 
          id="address1"
          [ngModel]="userInfo.address.address1"
          name="address1"
          #address1="ngModel"><br>
  <label>Address2 :</label><br>
  <input  type="text" 
          id="address2"
          [ngModel]="userInfo.address.address2"
          name="address2"
          #address2="ngModel"><br>
</div>

而且你对address2也有错误的绑定：

[ngModel]="userInfo.address2"

它应该是：

[ngModel]="userInfo.address.address2"

另请参阅普伦克示例