使用 ngModel (Ionic) 初始化对象答案

【问题标题】：Initialse objects with ngModel (Ionic)使用 ngModel (Ionic) 初始化对象
【发布时间】：2018-02-20 23:21:21
【问题描述】：

可能是一个简单的，但不能完全弄清楚。我已经成功地将一个 JSON 对象发布到我的 API，但感觉它可能会更干净一些。我有一个用户对象，里面有一个嵌套的地址对象。它看起来像这样：

{
  "forename": "string",
  "surname": "string",
  "email": "string",
  "dob": "2018-02-20T13:26:54.476Z",
  "address": {
    "addressLine1": "string",
    "addressLine2": "string",
    "city": "string",
    "postalCode": "string",
  },
  "password": "string"
}

我有这两个对象：

用户.ts

export class User {
    Forename : string;
    Surname : string;
    Email : string;
    // DOB : DateTime;
    Address : Address;
    Password : string;
    constructor(values: Object = {}) {
        Object.assign(this, values);
   }
}

还有，Address.ts：

export class Address {
    AddressLine1 : string;
    AddressLine2 : string;
    City : string;
    PostalCode : string;
    constructor(values: Object = {}) {
        Object.assign(this, values);
   }
}

我创建 POST 对象的方式是通过我的 HTML 中的 ngModel，它看起来像这样（只是一个示例，不是完整代码）：

SignUp.html：

<ion-item>
          <ion-input [(ngModel)]="user.Forename" id='txtFname' placeholder="First Name"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input [(ngModel)]="user.Surname" id='txtLname' placeholder="Last Name"></ion-input>
        </ion-item>

地址：

<ion-item>
          <ion-input [(ngModel)]="user.Address.AddressLine1" placeholder="Address Line 1"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input [(ngModel)]="user.Address.AddressLine2" placeholder="Address Line 2"></ion-input>
        </ion-item>

在我的 signup.ts 中，我通过首先初始化每个字段然后发布到我的 api 来实例化我的对象。这对我来说感觉不对，尽管这是我可以让它工作的唯一方法。此方法不使用上面显示的已定义的 Address.ts 和 User.ts。

SignUp.ts

newUser : User = { Forename: '', Surname: '', Email: '',  
  Address: {AddressLine1: '', AddressLine2: '', City: '', PostalCode: ''},
  Password: ''};

如果有人可以向我展示一种比我在 SignUp.ts（或 SignUp.html，如果这也不正确）中实现的方法更简洁的方法，我很乐意接受任何建议。我对此比较陌生。

提前致谢。

PS - 我也不知道如何使用上述方法初始化 DOB 字段（尽管目前这不是主要问题）。

【问题讨论】：

标签： angular typescript ionic3

【解决方案1】：

处理表单的一个好方法是使用@angular/forms。它会给你一个很好的结构，让你更容易使用验证器。

Ionic Forms Link implementing @angular/forms

Angular Documentation about Reactive Forms for advanced features

【讨论】：