Question

我正在使用被动表单，并且无法理解数据如何映射到表单的控件。让我们举一个具有id和name的对象控件的例子。此控件应呈现为输入文本框，用户键入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方法，这使得输入框显示{ {1}}而不是使用toString方法。

以下是样本订单的json的样子：

[object Object]

主要问题是，我如何确保以适当的类捕获以json形式出现的数据，以便像toString这样的方法可以正常显示。

Answer 1

注意：在typescript中创建复杂对象类型时，请始终使用interface。

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})
      ....
  });

使用函数

1 个答案: