For my project, I need to allow users to input time along with a time unit (day/minutes). If minutes are supported, a drop-down menu should be displayed; otherwise, only the text showing days should be shown. In the mentioned <div>, I need to set the form-field timeUnit according to the model attribute selectedTimeUnit. As a newcomer to Angular, I would appreciate any assistance. Thank you in advance.
<div>
<div class="div-table-col" *ngIf="!isMinutesAllowed()"> Enter time data
<input type="number" min="1" step="1" formControlName="period">
<select formControlName="timeUnit" [(ngModel)]="selectedTimeUnit">
<option *ngFor="let unit of getTimeUnits()" [ngValue]="unit">{{unit}}</option>
</select>
</div>
<div class="div-table-col" *ngIf="isMinutesAllowed()"> Enter time data
<input type="number" min="1" step="1" formControlName="period">
{{ selectedTimeUnit == 'DAYS' ? 'days' : 'minutes' }}
</div>
</div>
###########APPLIED THIS HACK NOT SURE IF THIS IS CORRECT##########
To address this issue, I have introduced an input field with a hidden type. Although I am unsure if this is the correct approach, it is functioning as required.
<div>
<div class="div-table-col" *ngIf="!isMinutesAllowed()"> Players who have been inactive for past
<input type="number" min="1" step="1" formControlName="periodOfInactivity">
<select formControlName="timeUnit" [(ngModel)]="selectedPeriodOfActivityTimeUnit">
<option *ngFor="let unit of getTimeUnit()" [ngValue]="unit">{{unit}}</option>
</select>
</div>
<div class="div-table-col" *ngIf="isMinutesAllowed()"> Players who have been inactive for past
<input type="number" min="1" step="1" formControlName="periodOfInactivity">
{{ selectedPeriodOfActivityTimeUnit == 'DAYS' ? 'days' : 'minutes' }}
<input type="hidden" formControlName="timeUnit" [(ngModel)]="selectedPeriodOfActivityTimeUnit"/>
</div>
</div>