Question

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

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

上面的代码显示所有选项都被选中，但是当我们提交表单时，它的值没有进入 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 反应形式的复选框从多选框中选择所有选项

1 个答案: