How to disabled current selected value with complex nested form array?-CodePudding

I have a problem on disabled selection box with nested form array, I would like to disabled the selected value (color Type) in each session. How to disabled selected value? Now I disabled current value but it will trigger another session in the same time. How to separate disabled on selection box in each session. Here is stackblitz

CodePudding user response：

The problem is because you have been using colorTypeList for all the 3 sessions. Therefore, when u disable one color, the change is reflected across the different sessions.

You may want to try separate array for each session's colorTypeList, each identifiable by the sessionId.

One way is to create it dynamically.

sessionColorTypeList = [];

setcolorTypeList(x) {
  let arr = new FormArray([]);

  x.colorTypeList.forEach((y) => {
    arr.push(
      this.fb.group({
        colorType: y.colorType,
      })
    );

    if (y.colorType == 'G') {
      this.sessionColorTypeList[x.sessionId][0].disabled = 'true';
    }
    if (y.colorType == 'R') {
      this.sessionColorTypeList[x.sessionId][1].disabled = 'true';
    }
    if (y.colorType == 'B') {
      this.sessionColorTypeList[x.sessionId][2].disabled = 'true';
    }
    if (y.colorType == 'Y') {
      this.sessionColorTypeList[x.sessionId][3].disabled = 'true';
    }
  });
  return arr;
}

This way you can adjust each session's colorTypeList. You can also manipulate the each sessions colorTypeList in disableSameSelection() and deleteAssignColor() as well.

Here is a full example: stackblitz