如何在 Angular 8 中创建动态下拉菜单

Question

In My UI, Each Row has level1,level2 and level3 dropdown along with "Add Level" Button.

I want on click on "Add Level" button, it will add a new set of three dropdown level1,level2 and level3 in the same row. As much as user click the "Add level" Button, every time it will dynamically add new set of dropdown in same row.

Other row dropdown will not impact with this.

Can anyone please help to modify my old code to work as my expected output.

StackBlitz Code URL

Please refer the attached image for my expected output for level1 level2 and level3 dropdowns

Answer 1

It's always the same. To control any object using ReactiveForms, you create a FormGroup for Object and FormArray for array. If the Array is an object, you create a FormArray of FormGroup, else you create a FormArray of FormGroup

The first is decided the structure of your data, as "levels" is an array, your data can be, eg

{
  "plannedProduction": 210468,
  "factORLossTree": [
    {
      "skuid": "000000000034087070",
      "skuDescription": "SUNLIGHT DESTINY HW PWD YELLOW 8X900G",
      "productionOrderNo": "X49033251",
      "category": "Fabric Cleaning",
      "levels": [
        {
          "level1": "",
          "level2": "",
          "level3": ""
        }
        ....
      ]
    },
    {
      "skuid": "000000000067141695",
      "skuDescription": "SUNLIGHT DESTINY YELLOW 24X170G",
      "productionOrderNo": "X49039793",
      "category": "Fabric Cleaning",
      "levels": [
        {
          "level1": "",
          "level2": "",
          "level3": ""
        }
        ....
      ]
    },
    ....
   ]
}

As always you have a FormArray you use a getter (*) you still have in your code

  get lossFormArray() {
    return this.orLosstreeForm.get('factORLossTree') as FormArray;
  }

As we have a FormArray inside a FormArray to get the inner FormArray we need another "getter". Well, can not be a getter because we need pass as argument the "index" of the formArray

  getLevels(index:number)
  {
    return this.lossFormArray.at(index).get('levels') as FormArray;
  }

we can use also an auxiliar function that return the value of the formArray at index to simplyfied the .html

  getItemValue(index:number)
  {
    return this.lossFormArray.at(index).value;
  }

Finally we are add a function to create the formGroup "level"

createLevel() {
    return this.fb.group({
      level1: [''],
      level2: [''],
      level3: [''],
    });

We are going now to create the formGroup change a bit your function setData

  setData() {
    const resp = {...}
    if (resp.factORLossTree.length > 0) {
      this.orLosstreeForm.patchValue({
        plannedProduction: resp.plannedVolume,
      });
      this.lossFormArray.clear();
      for (const item of resp.factORLossTree) {
        const data = {
          skuid: item.skuid,
          skuDescription: item.skuDescription,
          productionOrderNo: item.productionOrderNo,
          category: item.category,
         
          //see how transform the data to creaate the array "levels"
          levels: [
            {
              level1: item.level1,
              level2: item.level2,
              level3: item.level3,
            },
          ],
        };
        this.addItem(this.createLevelItem(data));
      }
    }
  }

And your function cteateLevelItem:

createLevelItem(data) {
    const formgrp = this.fb.group({
      skuid: ['', Validators.required],
      ...

      //see how levels is a formArray, at first with an unique element
      //we use the before function createLevel()
      levels: this.fb.array([this.createLevel()]),
    });
    if (data !== null) {
      formgrp.patchValue(data);
    }
    return formgrp;
  }

A complex part know is the .html, but I want to show how create a series of dropdown mutually exclusive. It's like this SO , but in this case we are going to have an array of arrays of arrays. Don't worry, make it slow is not so difficult as looks like

First we have a lsit of possibles levels and declare an empty array

  allLevels = ['Level 1', 'Level 2', 'Level 3', 'Level 4', 'Level 5'];

  levelList: any[] = [];

Then we are going to fill the array levelList. The adecuate place is in the function "createLevel". In this function we are subscribe to the valueChanges of the group. but we need know the index if the level. So the function becomes like

  createLevel(index: number) {

    //we are going to create some like
    //levelList[i][j][0], levelList[i][j][1], levelList[i][j][2]

    const j = this.orLosstreeForm && 
              this.lossFormArray && 
              this.lossFormArray.at(index)?
                   this.getLevels(index).controls.length:0;
    const group = this.fb.group({
      level1: [''],
      level2: [''],
      level3: [''],
    });
    group.valueChanges
      .pipe(startWith(null), takeUntil(this.active))
      .subscribe((res: any) => {
          res = res || { level1: null, level2: null };
          if (!this.levelList[index]) this.levelList[index] = [];

          this.levelList[index][j] = [];

          this.levelList[index][j][0] = this.allLevels;
          this.levelList[index][j][1] = this.allLevels.filter(
            (x) => x != res.level1
          );
          this.levelList[index][j][2] = this.allLevels.filter(
            (x) => x != res.level1 && x != res.level2
          );

          //And we check if there any repeat

          if (this.levelList[index][j][1].indexOf(res.level2) < 0)
            group.get('level2').setValue(null, { emitEvent: false });

          if (this.levelList[index][j][2].indexOf(res.level3) < 0)
            group.get('level3').setValue(null, { emitEvent: false });
      });
    return group;
  }

Puff, I know is too large, but be patient, the last part is the .html

<div style="background-color: white;">
  <form [formGroup]="orLosstreeForm" *ngIf="orLosstreeForm">
    ...
    <!-- Start of OR loss tree table -->
    <div class="selection-area" formArrayName="factORLossTree">
      <div
        *ngFor="let levelItem of lossFormArray.controls;let i=index" [formGroupName]="i"
      >
        <ng-container>
           ...here we can use getItemValue(i).skuDescription
              or getItemValue(i).skuid or ...

                  <div class="deviations" formArrayName="levels">

                      <div class="row" *ngFor="let group of getLevels(i).controls;
        let j=index" [formGroupName]="j">
                        <div class="col-md-3">
                          <mat-form-field>
                            <mat-label>Level 1</mat-label>
                            <mat-select
                              name="level1"
                              formControlName="level1"
                            >
                              <mat-option value="">--Select--</mat-option>
                                <mat-option
                                  *ngFor="let item of levelList[i][j][0]"
                                  [value]="item"
                                >
                                  {{ item }}
                                </mat-option>
                            </mat-select>
                          </mat-form-field>
                        </div>
                        <div class="col-md-3">
                          <mat-form-field>
                            <mat-label>Level 2</mat-label>
                            <mat-select
                              name="level2"
                              formControlName="level2"
                            >
                              <mat-option value="">--Select--</mat-option>
                                <mat-option
                                  *ngFor="let item of levelList[i][j][1]"
                                  [value]="item"
                                >
                                  {{ item }}
                                </mat-option>

                            </mat-select>
                          </mat-form-field>
                        </div>
                        <div class="col-md-3">
                          <mat-form-field>
                            <mat-label>Level 3</mat-label>
                            <mat-select name="level3"
                              formControlName="level3"
                            >
                              <mat-option value="">--Select--</mat-option>

                               <mat-option
                                  *ngFor="let item of levelList[i][j][2]"
                                  [value]="item"
                                >
                                  {{ item }}
                                </mat-option>
                            </mat-select>
                          </mat-form-field>
                        </div>

                        <div class="col-md-3">
                          <button
                            class="resetButton"
                            aria-describedby="Reset SKU"
                            (click)="getLevels(i).push(createLevel(i))"
                          >
                            Add Level
                          </button>
                        </div>
                    </div>
            ....
    </div>
  </form>
</div>

Se how to add a new group of levels we only need the

<button (click)="getLevels(i).push(createLevel(i))">
    Add Level
</button>

The final stackblitz