0

我正在使用反应式表单，并且在理解数据如何映射到表单的控件时遇到了一些麻烦。让我们举一个具有 id 和名称的对象控件的示例。此控件应呈现为输入文本框，并且用户键入 Id。然后，我使用自动完成功能远程查找对象并使用如下所示的数据填充底层对象

{ id: 1234, description: "Some description" }

因为，这是一个对象而不是字符串 - 输入框显示 [object Object] 作为其值。我假设我需要toString为此对象提供一种方法才能显示这样的值1234 - Some description。

这是表单配置：

this.orderForm = this.fb.group({
  customer: '',
  ....
  items: this.fb.array([ this.initItems() ])
  ...

这些对象之一也是如此customer，并且该对象上还有另一个类似的item对象。

export class Customer {
   id: string;
   descr: string;
   toString = () => this.id + " - " + this.descr
}

export class ItemDetail {
    id: string;
    descr: string;
    toString = () => this.id + " - " + this.descr
}

export class Order {
    id: string;
    ...
    customer: Customer;
    items: Item[]
}

export class Item {
    ...
    detail: ItemDetail
    ...
}

获得订单数据后，我会以如下形式加载它：

const itemsFGs = order.items.map(item => this.fb.group(item));
const itemsFA = this.fb.array(itemsFGs);
this.orderForm.setControl('items', itemsFA);

问题是数据作为普通对象加载，并且没有类型转换为适当的类，因此，toString任何嵌套对象都没有方法可以显示输入框[object Object]而不是使用 toString 方法。

示例订单的 json 如下所示：

{
  id: "1",
  customer: {
    id: "1",
    name: "some customer"
  },
  items: [{
     detail: {
       id: "1",
       descr: "some item"
     }
  }]
}

主要问题是，如何确保以 json 形式传入的数据被捕获在适当的类中，以便 toString 等方法可用于正确显示。

4

1 回答 1

0

关键提示：当您在 typescript 中创建复杂的对象类型时，请始终使用接口。

export interface Customer {
   id: string;
   descr: string;
}

此外，如果您不确定来自服务的参数并且您期望出现未定义的错误，请使用以下代码将这些属性指定为可选，

export interface ItemDetail {
    id: string;
    name: string;
    descr?: string; //optional
}

export interface Order {
    id: string;
    ...
    customer: Customer;
    items: Item[]
}
export interface Customer{
    id:string;
    name: string;
    address?: string; //optional
    dob?: Date;       //optional

}

这样，如果可选参数不在响应中，则可以避免它们绑定到实际对象。当这些属性在服务响应中可用时，它们如何按预期绑定。

更新 1：

你应该做另一个级别的分组

 this.form = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.minLength(3)]],
      customerGroup :this.fb.group({
               firstName: ['', [Validators.required, Validators.minLength(3)]],
               lastName: ['', [Validators.required, Validators.minLength(3)]],   
      }, {validator: Validators.required})
      ....
  });
于 2017-04-13T01:06:33.097 回答