Question

我目前正在重写一个表单逻辑，该逻辑目前正在这样工作（分解）；

<li *ngFor="let product of products; i = index">
  <h3>
    {{ product.title }}
  </h3>

  <input [(ngModel)]="product.quantity">
</li>

我要遍历组件类的一系列产品模型。我将其更新为使用响应式表单，主要是因为产品列表现在存在于本身是响应式的高级订单表单的上下文中。出于这个问题的目的，请采用以下表单定义；

this.formBuilder.group({
  title: ['', Validators.required],
  products: this.formBuilder.array([]),
});

通过以下方法添加新产品线的地方；

private addProductLine(product: Product) {
  const form = this.formBuilder.group({
    quantity: [1, Validators.required],
  });
  const productsArray = this.orderForm.get('products') as FormArray;

  productsArray.push(form);
}

现在，我已经更新了模板，以遍历products表单数组中的控件，就像这样；

<li *ngFor="let productForm of orderForm.get('products')['controls']; index as i">
  <ng-container [formGroupName]="i">
    <h3>
      (Product Title?)
    </h3>

    <input formControlName="quantity">
  </ng-container>
</li>

这是有效的-添加新的产品线可创建工作表。但是，我不知道如何将产品模型与产品子表单相关联，以显示有关其的信息（在本例中为其标题）。我考虑过将title或product作为产品线子表单中的字段添加到模板中以供参考，但是考虑到我不想将其视为字段，这是错误的，因此还有另一种模式可以在这种情况下是否要添加只读视图数据？我已经查看了Angular文档中的反应形式，但是对此没有任何建议。

或者，这是执行此操作的最佳方法，还是维护两个单独的列表-一种是模型，一种是表单，然后以某种方式绑定它们更好吗？

角度-以反应形式定义关联显示数据

0 个答案: