Issue
I am using reactive form. In a dropdown you cannot insert a placeholder I am trying to have a default value selected in my dropdown for students that do not have extra time allocated to them The dropdown should selected 00:00:00 and disable it if there is no extra time value coming from the DB.
HTML
<select class="form-control" id="extraTimeDuration" [(ngModel)]="extraTimeIds[link.studentID]">
<option [value]="0" disabled selected >00:00:00</option>
<option *ngFor="let extraTimeDuration of extraTimeDurations"[ngValue]="extraTimeDuration.key">
{{extraTimeDuration.value}}
</option>
</select>
TS
export class StudentDisplayComponent {
studentIds: number[] = [];
extraTimeIds: Record<number, string> = {};
extraTimeDurations: any[] = [];
ngOnInit(): void {
this.initForms();
this.generateExtraTimeDurations()
}
public populateStudentList( param1?: number,param2?: number,param3?: number) {
this.paramService
.getUrl(
`param-list?param1=${param1}¶m2=${param2}¶m3=${param3}`
)
.subscribe((data) => {
this.links = data
this.resetLinks()
console.log("data returned", " ", data);
this.studentList = data;
this.cdRef.detectChanges();
const linked = this.links.filter(x => x.linked);
data.forEach(x => {
console.log(x.linked, x.studentID);
if (x.linked) this.studentIds.push(x.studentID)
if (x.electronicReader) this.readerIds.push(x.studentID)
this.extraTimeIds[x.studentID] = x.studentExtraTime ?? '00:00:00'
});
});
}
private generateExtraTimeDurations = () => {
const increment = 5;
for (let minutes = increment; minutes <= 1 * 60; minutes += increment) {
const hours = Math.floor(minutes / 60);
const remainingMinutes = minutes % 60;
const formattedHours = hours.toString().padStart(2, "0");
const formattedMinutes = remainingMinutes.toString().padStart(2, "0");
const value = `${formattedHours} hrs : ${formattedMinutes} min`;
const key = `${formattedHours}:${formattedMinutes}:00`;
this.extraTimeDurations.push({key, value});
console.log("extra time units");
console.log(this.extraTimeDurations);
}
};
private resetLinks = () => {
this.studentIds = [];
this.extraTimeIds = [];
}
}
Solution
You can try using Angular's template-driven forms approach.
<select class="form-control" id="extraTimeDuration" [(ngModel)]="extraTimeIds[link.studentID]">
<option *ngIf="!extraTimeIds[link.studentID]" [value]="null" disabled selected>00:00:00</option>
<option *ngFor="let extraTimeDuration of extraTimeDurations" [ngValue]="extraTimeDuration.key">
{{ extraTimeDuration.value }}
</option>
</select>
Answered By - Ale_Bianco
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.