I'm in need of assistance with a project that I'm working on. To be completely honest, I am struggling to complete it without some help. Since I am new to Angular and Springboot with only basic knowledge, I have hit a roadblock and can't make progress on the project assigned to me.
One of the main issues I am facing is that some dropdown lists are not showing the selected values retrieved from the database. It seems to be a problem with a custom component.
[select.component.html]
<ng-container *ngIf="config">
<label>{{config.label.label | translate:config.label.params}}</label>
<select class="form-control form-control-sm" [formControl]="config.ctrl" (blur)="onBlur.emit()">
<option>{{'common.select.default' | translate}}</option>
<option *ngFor="let option of config.values" value="{{option.value}}">{{option.label | translate}}</option>
</select>
</ng-container>
[select.component.ts]
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {SelectConfig} from '@shared/model/select.config';
@Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.scss']
})
export class SelectComponent implements OnInit {
@Input() config!: SelectConfig;
@Output() onBlur = new EventEmitter<void>();
constructor() {
}
ngOnInit(): void {
}
ngOnChange() {
}
}
[select.config.ts]
import { LabelWithParam } from '@shared/model/label-with-params';
import { FormControl } from '@angular/forms';
export interface SelectConfig {
values: SelectOption[];
label: LabelWithParam;
placeholder: string;
ctrl: FormControl;
}
export interface SelectOption {
value: any;
label: string;
}
[detail.html]
<app-select *ngIf="actifSelectConfig$ | async as actifSelectConfig"
[config]="actifSelectConfig"
(onBlur)="update()">
</app-select>
[detail.ts]
public getControl(name: string): FormControl {
return this.formGroup.get(name) as FormControl;
}
this.actifSelectConfig$.next( {
label: {label: 'form.user.label.active'},
placeholder: 'form.user.placeholder.active',
ctrl: this.getControl('active'),
values: ActifHelper.toSelectOption()
});
I am currently struggling to figure out how to display the DB value in the dropdown list, as it remains stuck on the default option "Select a value."
Thank you for your help!