Question

我有一个表单，其中一些输入来自其他输入。我想知道如何在我的组件中管理这些纯粹信息丰富的字段。

以下是一个例子：

假设我有一个包含产品ID和金额的订单。

class Product {
  id: string;
  name: string;
  price: number;
}

class Order {
  procut: Product;
  amount: number;
}

选择产品时，我想显示其名称和价格。我该如何管理这些信息？

我可以尝试将表单与局部变量同步并相应地更新表单

<form [formGroup]="form">
  <label>Product</label>
  <input type="text" formControlName="productId">
  <input type="text" [value]="order.product.name" disabled>
  <input type="text" [value]="order.product.price" disabled>
  <label>Amount</label>
  <input type="number" formControlName="amount">
</form>

ngOnInit() {
  this.form = this._fb.group({
    'productId': [this.order.product.id],
    'amount': [this.order.amount],
  });
}

或者我可以使用这样的东西，在那里我将我想要的所有数据绑定到表单的字段。

<form [formGroup]="form">
  <label>Product</label>
  <input type="text" formControlName="productId">
  <input type="text" formControlName="name" disabled>
  <input type="text" formControlName="price" disabled>
  <label>Amount</label>
  <input type="number" formControlName="amount">
</form>

ngOnInit() {
  this.form = this._fb.group({
    'productId': [this.order.product.id],
    'amount': [this.order.product.amount],
    'name': [this.order.product.name],
    'price': [this.order.price],
  });
}

知道我将使用REST检索数据，数据模型可能会变得更加复杂。我应该如何构建表单和模型？

或者我应该选择像这样更平坦的模型

class order {
  procutId: 'string';
  amount: number;
}

然后使用REST调用检索其余数据。

Answer 1

我没有看到这两个选项有什么问题，但是我会选择第二个选项，因为它会使代码更加一致，并使您的模板更清晰，更少依赖于模型结构。

如何以Angular形式管理非必要/派生数据

1 个答案: