Question

可能很容易，但无法弄明白。我已成功将一个JSON对象发布到我的API，但感觉它可能会更清洁一点。我有一个User对象，里面有一个嵌套的地址对象。它看起来像这样：

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

我有这两个对象：

User.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字段（尽管这不是现在的主要问题）。

Answer 1

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

Ionic Forms Link implementing @angular/forms

Angular Documentation about Reactive Forms for advanced features

使用ngModel（Ionic）的

1 个答案: