CODEWITHSUNDEEP
angulardrop-down-menudevexpressdevextremeformarray
cng
cng

Reputation: 67

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

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

Upvotes: 0

Views: 122

Answers (1)

joohong89
joohong89

Reputation: 1271

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

Upvotes: 1

Related Questions