How to select all options from multi selectbox using checkbox in angular 9 reactive forms

Question

I tried to select all options of a multi select box using a checkbox. The code is shown below :

    <div class="col-md-6">
    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" (change)="selectAll($event)">
    <label class="custom-control-label" >Select all</label>
    </div>
    
    <select multiple class="form-control multi-select" formControlName="product">
    <ng-container *ngFor="let product of productList" >
                                        
    <option [ngValue]="product.id" [selected]="selected">{{product.name}}</option>  
    </ng-container>
   </select>
    </div>

In ts :

selectAll(e){ 
    if (e.target.checked) {
      this.selected = true;
    } else{
      this.selected = false;
    }
    
  }

The above code shows all options as selected but when we submit the form its value is not getting in the ts. How can I solve this issue?

Emilien · Accepted Answer · 2021-03-15 10:40:04Z

1

Try like this :

form: FormGroup;

selectAll(e){ 
  if (e.target.checked) {
     this.form.get('product').setValue(this.productList.map(({ id }) => id));
  } else{
     this.form.reset([]);
  }
}

<select multiple class="form-control multi-select" formControlName="product">
  <option
    *ngFor="let product of productList"
    [value]="product.id">{{ product.name }}
  </option>  
</select>

answered Mar 15, 2021 at 10:40

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

How to select all options from multi selectbox using checkbox in angular 9 reactive forms

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related