Как управлять несущественными / производными данными в угловых формах

Question

У меня есть форма, где некоторые входные данные получены из других входных данных.И я хочу знать, как мне управлять этими чисто информационными полями в моем компоненте.

Вот пример:

Допустим, у меня есть заказ, который содержит идентификатор продукта и сумму.

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

Я не вижу ничего плохого в обоих вариантах, однако я бы остановился на втором, поскольку он делает код более согласованным, делает ваш шаблон более чистым и менее зависимым от структуры модели.