angular - Angular でリアクティブ動的フォームに追加データを渡す方法

Question

formControl編集可能 (オブジェクトになります) と読み取り専用データ (HTML 上の静的テキストになります)を組み合わせた配列があります。Angularでそれを行う方法はありますか? と を使用FormArraysしFormGroupsてこの静的テキストを追加することもできますが、それは間違っているように感じます。例を挙げて問題を詳しく説明しましょう。

たとえば、次のような JSON オブジェクトがあるとします。

itemArray = [{
  title: 'fancy item', // not a member of the form (read-only)
  quantity: 0 // member of the form (editable)
},
{
  title: 'weird item', // not a member of the form (read-only)
  quantity: 1 // member of the form (editabe)
}
]

項目のフィールドには FormArrays を使用quantityします。

this.formItems = new FormArray([
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
          title: new FormControl('Fancy item') // Readonly text for form group. What's the best way to add a enrichment data for a form group?
        }
      ),
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
          title: new FormControl('Weird item') // Readonly text for form group. What's the best way to add a enrichment data for a form group?
        }
      )
    ]
);

ただし、タイトルは編集可能な項目ではありません。にデータを追加する最良の方法は何FormGroupですか?

itemsそれ以外の場合は、この追加の編集不可能なデータを管理するために呼び出される別の配列を作成する必要があります。そのため、item のフィールドを 2 つの個別のオブジェクトに分割できます。1) staticDataForItems, 2) editableDataForItems.

this.staticDataForItems = [{
    title: 'Weird item',
  }
];

this.editableDataForItems = new FormArray([
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
        }
      ),
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
        }
      )
    ]
);

これは私が好まない解決策です。私のユースケースでは、配列にアイテムを追加したり、配列から「アイテム」を削除したりできるためです。formArray将来性のない2 つの配列 (items と ) を扱いたくありません。

読み取り専用 (読み取り専用 HTML 要素) と編集可能なデータ (入力 HTML 要素) データの組み合わせがある場合、これら 2 つの配列を 1 つの配列に結合するにはどうすればよいですか。

フォーム検証の恩恵を受けたいし、良い方法でデータを追加したいと思っています。

以下に実際の例を示します。

https://stackblitz.com/edit/angular-gw1c6d?file=app%2Fapp.component.ts

ありがとう。