Angular/Ionic FormGroup、FormArray、FormBuilder……我迷路了

Posted 2023-02-18

【中文标题】Angular/Ionic FormGroup、FormArray、FormBuilder……我迷路了

【英文标题】：Angular/Ionic FormGroup, FormArray, FormBuilder... I'm lost

【发布时间】：2022-01-23 18:56:27

【问题描述】：

用例：这是一家咖啡店的库存更新页面。

库存项目的定义如下：

interface InventoryData 
  category: string;
  current: number;
  id: string;
  name: string;
  par: number;
  units: string;
  previous?: string;
  supplier: string;
  notes?: string;

在此页面上，我只为每个项目处理 current 级别和 notes?。

在表格的底部，我有一个ion-textarea，这是一个供员工写下经理应该知道的任何内容的空间。

所以页面的结构是

HEADER
   SECTION HEADERS ENTERED AUTOMATICALLY ON CHANGE OF CATEGORY

      ITEM[0]                                  <-+
          [ITEM DETAILS]                         |
          [INPUT CURRENT QUANTITY]               |
          [INPUT NOTES]                          |--- Array of similar items with
      ITEM[1]...                                 |    inputs for quantity and notes
      ITEM[2]...                                 |    for each
                                                 |
      ITEM[n]                                  <-+

  GENERAL NOTES SECTION                <---- not part of an item... overall info.

FOOTER

我尝试将页面设置为具有两种单独的表格，一种用于库存项目，另一种用于最后的一般说明。像这样的：

  inventoryForm = this.fb.group(
    items: this.fb.array([]),
  );

  notesForm = this.nb.group(
    notes: [''],
  );

我已经尝试将其设置为单个表单，其中包含数组项以及一个用于一般注释的附加表单域。

但这一切似乎都很混乱。

所以我希望了解有经验的人是如何做到这一点的。这更像是一个策略问题，而不是一个编码问题，但我很高兴能从任何一个方向提出建议。 p>

【问题讨论】：

这是一个非常自以为是的问题......但我的两分钱。我只会有一种形式，我不觉得它很乱。通常后端以某种方式想要数据，这就是我们随后如何构造表单的方式，至少尽可能如此，以便在提交表单时，如果可以将其按原样发送到后端是理想的。

【参考方案1】：

通常在这种矛盾的状态下，我会问自己：

数据是否在单个 API 中返回？ （不意味着严重倾向于两种形式） 更新一个表单中的值是否会影响（验证）另一个表单。 （是的，严重倾向于单一形式，不意味着倾向于两种形式） 组件可重用性是否会产生影响。 （您也可以在 Angular 中创建可重用的表单组件）

在您的情况下，如果两个 from 与单个 API 中的单个按钮一起提交，那么它应该是单个表单。

如果您在单个组件中编写大量代码，它可能看起来很混乱。你总是可以尽可能地划分代码。

 inventoryForm = this.fb.group(
    items: this.fb.array([]),
    notes: [''],
  ); 

只是一个观察： 您的笔记区域看起来更像评论区。