Question

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

user.ts

export class User {

constructor(
    public fname : string,
    public lname : string,
    public address : 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
}

当我们提交此表单时，

前两个控制台显示输出

但是在最后一个控制台中它会抛出异常

EXCEPTION：./ UserSeronent类中的错误UserComponent - 内联模板：10：1导致：无法读取未定义的属性“address1”

尝试更改'name'属性，如

name = "address1"或

name = "address.address1"

但得到同样的错误

Answer 1

出于此类目的有特殊指示 - ngModelGroup。它在表单中创建一个子组。

所以我会将Address fieds包裹在div ngModelGroup绑定中，如：

<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"

另请参阅 Plunker Example

在Angular 2中提交表单时没有获得那些类对象的值，其他类的对象

1 个答案: