Angular Bootstrap DropDown reactive form items not loading

Question

I am trying to create a dropdown with multiple checkboxes. checkboxes are showing up but All the labels are shown by clicking multiple times on the dropdown button.

Component.ts :

export class NgbdDropdownBasic implements OnInit {
  options = ["Hello", "World", "How", "Are", "You", "Doing"];
  selectForm: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.selectForm = new FormGroup({
      selects: new FormArray([])
    });
    for (const option of this.options) {
      this.selectForm.controls.selects.push(new FormControl(option));
    }
  }
}

component.html:

<div class="row">
<div class="col">
    <div ngbDropdown class="d-inline-block" [formGroup]="selectForm">
        <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" formArrayName="selects">
            <div class="form-group mr-auto border-bottom"
                *ngFor="let option of selectForm.controls.selects.controls; index as index">
                <input type="checkbox" class="form-check-check" [id]="index" [formControlName]="option">
                <label class="form-check-label" for="{{ index }}" >
        {{ option.value }}
      </label>
            </div>
        </div>
    </div>
</div>

Ali Bigdeli · Accepted Answer · 2020-08-14 15:52:58Z

1

FormArray are index based, change [formControlName]="option" to [formControlName]="index".

component.html

    <div class="row">
      <div class="col">
        <div ngbDropdown class="d-inline-block" [formGroup]="selectForm">
          <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1" formArrayName="selects">
            <div class="form-group mr-auto border-bottom"
              *ngFor="let option of selectForm.controls.selects.controls; index as index">
              <input type="checkbox" class="form-check-check" [id]="index" [formControlName]="index">
              <label class="form-check-label" for="{{ index }}">
                {{index}}
                {{ options[index] }}
              </label>
            </div>
          </div>
        </div>
      </div>

edited Aug 14, 2020 at 15:52

Ali Bigdeli

1,4053 gold badges18 silver badges36 bronze badges

answered Jan 28, 2020 at 8:48

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devashish Over a year ago

Thanks a lot ... this was the first time I was using FormArray. Thanks for the help!

Chellappan வ Over a year ago

No problem 🙂. Glad to Help!👍

Collectives™ on Stack Overflow

Angular Bootstrap DropDown reactive form items not loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related