I am working on a website that includes an ng-bootstrap modal. This modal contains two <select> elements with dynamic items, allowing the user to click on two buttons. One button simply closes the modal and sets the value of the Reactive Form to new Date(). However, when the other button is pressed, I need to retrieve the values from both <select> elements and set them as the value of the Reactive Form.
Since I am new to angular, I am unsure how to extract the values from the <select> elements upon clicking a button. Can anyone provide guidance on this?
Below is the code snippet for my Modal:
<ng-template #programma let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Choose a time</h4>
<button
type="button"
class="close"
aria-label="Close"
(click)="quando(true, modal)"
>
<span aria-hidden="true"&g;t×</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)"
>
Schedule
</button>
<button
type="button"
class="btn btn-lg btn-block btn-dark"
(click)="quando(true, modal)"
>
Deliver now
</button>
</div>
</ng-template>
Here is the quando() method used to set the value in the Reactive Form:
quando(val: boolean, modal?: any): void {
this.quandoCheck = val;
if (val) {
this.checkoutForm.get('spedizione.quando').patchValue(new Date());
} else {
// Need to get values from SELECT and set them to this.checkoutForm.get('spedizione.quando')
}
if (modal){
modal.close();
}
}