Angular 5 - 多选而不按Ctrl键

Question

我正在处理一个表单，我正在使用 Angular Reactive Forms。 我需要在我的表单中进行多项选择，我确实通过按 ctrl 并选择多个选项来完成它。 我希望能够在不按 ctrl 键的情况下使用多选。 有可能吗？

表单组件:

this.productForm = new FormGroup({
  'items': new FormControl(this.product.items, Validators.required),
});

模板:

<div class="form-group">
  <select multiple="multiple" class="form-control" id="items" formControlName="items" required>
    <option *ngFor="let item of itemList" [value]="item.id">{{item.name}}</option>
  </select>
</div>

更新:

我尝试了 greg95000 的解决方案，但它只是一个部分有效的解决方案。

<div class="form-group">
  <select multiple="multiple" class="form-control" id="items" formControlName="items" required>
    <option (mousedown)="onMouseDown($event)" (mousemove)="$event.preventDefault()" *ngFor="let item of items" [value]="item.id">{{item.name}}</option>
  </select>
</div>


public onMouseDown(event: MouseEvent) {
  event.preventDefault();
  event.target['selected'] = !event.target['selected'];
}

这个解决方案打破了数据绑定(bind)

Answer 1

我有一个有效的解决方案。因为我复制数组 Angular 知道有变化所以选择得到更新。 这是我的选择:

 <select class="form-control" multiple name="positionTypes" [(ngModel)]="freelancer.positionTypes" #select1>
  <option *ngFor="let positionType of positionTypes" [value]="positionType" (mousedown)="false" 
   (click)="positionTypMouseDown($event)">{{'PositionType.'+positionType | translate}}</option> 
 </select>

这是我组件中的函数:

positionTypMouseDown( event: any ) {
    event.stopPropagation();
    let scrollTop = 0;
    if ( event.target.parentNode ) {
        scrollTop = event.target.parentNode.scrollTop;
    }
    const stringValue = event.target.value.split( '\'' )[1];
    const index = this.freelancer.positionTypes.indexOf( stringValue, 0 );
    if ( index > -1 ) {
        this.freelancer.positionTypes.splice( index, 1 );
    } else {
        this.freelancer.positionTypes.push( stringValue );
    }
    // to make angular aware there is something new
    const tmp = this.freelancer.positionTypes;
    this.freelancer.positionTypes = [];
    for ( let i = 0; i < tmp.length; i++ ) {
        this.freelancer.positionTypes[i] = tmp[i];
    }
    setTimeout(( function() { event.target.parentNode.scrollTop = scrollTop; } ), 0 );
    setTimeout(( function() { event.target.parentNode.focus(); } ), 0 );
    return false;
}

我现在更新了我的答案，它在 chrome 中也能正常工作。重要的部分是焦点和滚动不关注选项而是关注选择(即 event.target.parentNode