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

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 形式管理非必要/派生数据

How to manage non essential / derived data in Angular forms

rest

angular

angular-reactive-forms