はじめに

formArray で要素を追加できる UI において、重複された key が選択される場合があります。
例えばこのサンプルでいうと以下のように Apple が2行に渡って選択されている状態です。

Angular form array duplicate keys

今回は重複した key を集計して個数カウントおよびエラー制御を行う実装してみました。
サンプルアプリケーションのソースコードを Github で公開しています。

github.com

アプリケーションはこちら

fir-angular-showcase.web.app

Angular formArray 内の重複した key をまとめる

まず key である product に入力があるものだけを arr という投げやりな変数に詰めています。

空のマップ const m = new Map(); に対して product を key に productNumber を集計し forEach で product と productNumber を詰め直しています。

export interface Products {
  product: Product;
  productNumber: number;
}
export interface Order {
  products: Products[];
}

~~ 省略 ~~

calculate(order?: Order) {
  const arr = [];
  for (const p of order.products) {
    if (p.product) {
      arr.push(p);
    }
  }

  const m = new Map();
  this.productsList = [];

  arr.reduce((aggr, current) => {
    aggr.set(current.product, aggr.has(current.product) ? aggr.get(current.product) + current.productNumber : current.productNumber);
    return aggr;
  }, m).forEach(function(value, key) {
    this.push({product: key, productNumber: value});
  }, this.productsList);

}