How to bind ngSelect dropdowns dynamically in Angular FormArray

Question

I'm facing issue with binding list with ngSelect dropdown in Anguarl FormArray, I'm building a FormGroup with FormArray contains list of state and city dropdowns.

The state ddl will load oninit(), then when i Change state, the city ddl should load with respective data, but it should not affect the other city ddl.

The other city dropdown should not load until the respected state is selected.

I'm able to load the state initially but unable to bind city ddl on state change. Here is my code. Please have a look.

import { Component, OnInit } from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  FormArray,
  AbstractControl
} from "@angular/forms";
import { debounceTime } from "rxjs/operators";

@Component({
  selector: "state-block",
  templateUrl: "./state-block.component.html",
  styleUrls: ["./state-block.component.scss"]
})
export class StateBlockComponent implements OnInit {
  typeLoadName: string;
  lFormGroup: FormGroup;
  states = [1, 2, 3, 4];

  stateControl: AbstractControl;
  stateFormControls: FormGroup;

  get lFormArray(): FormArray {
    return this.lFormGroup.get("lFormArray") as FormArray;
  }

  statelist = ["state1", "state2", "state3", "state4"];
  citylist = [];
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.initControls();
  }
 
  initControls() {
    this.lFormGroup = this.fb.group({
      lFormArray: this.fb.array([])
    });
    this.states.forEach(element => {
      this.stateFormControls = this.createControls();

      const myFormArray = <FormArray>this.lFormGroup.get("lFormArray");

      this.stateFormControls.get("groupIndex").patchValue(myFormArray.length);

      this.stateFormControls.valueChanges.subscribe(data =>
        this.onValuesChanged(data)
      );

      this.lFormArray.push(this.stateFormControls);

      this.lFormArray.valueChanges.subscribe(value =>
        this.onFormArrayValueChanged(value)
      );

      const citylist = [
        "zonePeril1",
        "zonePeril2",
        "zonePeril3",
        "zonePeril4"
      ];

      const selectedStateControl = this.stateFormControls.get("state");
      selectedStateControl.valueChanges.subscribe(data => {
        this.stateFormControls.get("city").value = zonePerilList;
        
      });
    });
  }
  onFormArrayValueChanged(value: any): void {
    console.log("on form array value changed", value);
  }
  onValuesChanged(data: any): void {
    console.log("on value changed", data);
    
  }
  createControls() {
    return this.fb.group({
      groupIndex: "",
      state: "",
      city: "",
      
    });
  }
  
}

<form [formGroup]="lFormGroup">
  <div [formGroup]="lFormGroup">
    <div formArrayName="lFormArray">
      <div
        [formGroupName]="i"
        *ngFor="let item of lFormArray.controls; let i = index"
      >
        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label" for="cityId">State</label>
          <div class="col-md-3">
            <ng-select
              [items]="statelist"
              bindLabel="name"
              placeholder="Select state"
              formControlName="state"                         
            >
            </ng-select>
          </div>
          <label class="col-md-2 col-form-label" for="cityId">City</label>
          <div class="col-md-3">
            <ng-select
              [items]="citylist"
              bindLabel="name"
              placeholder="Select city"
              formControlName="city"
            >
            </ng-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

This is not answered yet

Ashot Aleqsanyan Ashot Aleqsanyan · Accepted Answer · 2019-11-24T20:40:47

Please check stackblitz example is this what you want?

https://stackblitz.com/edit/ng-select-egj2ht

How to bind ngSelect dropdowns dynamically in Angular FormArray

1 Answers