如何从ng-bootstrap模态中获取选择值？

问题描述

我的网站上有一个ng-bootstrap模态，该模态中有两个<select>，其中包含动态项，然后用户可以单击两个按钮，一个会关闭modal，然后将反应形式值设置为new Date()，但是当用户按下另一个按钮时，我必须同时从<select>获取值并将其设置为反应形式值。

当我刚接触角度时，如何在点击时从<select>获取值？

这是我的模态：

<ng-template #programma let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Scegli un orario</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="quando(true,modal)"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <select class="btn btn-lg btn-block btn-outline-primary" >
      <option *ngFor="let giorno of giorni" [value]="giorno.time">{{ giorno.formatted }}</option>
    </select>
    <select class="btn btn-lg btn-block btn-outline-primary mt-3">
      <option *ngFor="let ora of ore" [value]="ora">{{ ora }}</option>
    </select>
    <button
      type="button"
      class="btn btn-lg btn-block btn-primary"
      (click)="quando(false,modal)"
    >
      Programma
    </button>
    <button
      type="button"
      class="btn btn-lg btn-block btn-dark"
      (click)="quando(true,modal)"
    >
      Consegna adesso
    </button>
  </div>
</ng-template>

这是方法quando（），将值设置为反应形式

quando(val: boolean,modal?: any): void {
    this.quandoCheck = val;
    if (val) {
      this.checkoutForm.get('spedizione.quando').patchValue(new Date());
    } else {
      // get values from SELECT and set to this.checkoutForm.get('spedizione.quando')
    }

    if (modal){
      modal.close();
    }
  }

解决方法

我应该如何从选择输入中获取值

您可以通过两种方式将模型绑定到选择输入：

1. 反应性（使用formControl）：

• 在模板中：

<select [formControl] = "select1Control" ...

• 在控制器中：

@Component({...})
export class MyComp {
select1Control = new FormControl('');
...

• 如何获取价值：

console.log(this.select1Control.value)

1. 模板驱动（使用ngModel）：

• 在模板中：

<select [(ngModel)] = "select1" ...

• 在控制器中：

@Component({...})
export class MyComp {
select1 = ''
...

• 如何获取价值：

console.log(this.select1)

Run It On Stackblitz

其他选项：使用表单组/使用参考。

Ps：不要忘记导入表单（或reactForm）模块。