如何使用 angular 9 反应形式中的复选框 select 来自多 select 框的所有选项

Question

我尝试使用复选框 select 多 select 框的所有选项。代码如下所示：

    <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>

在 ts :

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

上面的代码将所有选项显示为 selected 但是当我们提交表单时它的值没有进入 ts.我该如何解决这个问题？

Answer 1

这样试试：

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>

如何使用 angular 9 反应形式中的复选框 select 来自多 select 框的所有选项

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

typescript

angular

angular-reactive-forms