I have been using Angular as my UI framework. In my project , I had the need to define an enum. It goes as:
AlertSeverity.ts:
export enum AlertSeverity {
Normal = 0,
Warning = 50,
Severe = 100,
}
and another enum file :
StatusChange.ts
export enum StatusChange{
Broken = 1,
Damaged = 2,
WornOut = 3,
PM = 4,
FixedOrReplaced = 5,
Inspected = 6,
Other = 7
}
In my component file, I have used the enum like this :
Component.ts:
readonly statuses = [
{ id: AlertSeverity.Normal , text: 'Normal' },
{ id: AlertSeverity.Warning , text: 'Warning' },
{ id: AlertSeverity.Severe , text: 'Severe' },
];
readonly reasons = [
{ id: StatusChange.Broken , text: 'Broken' },
{ id: StatusChange.Damaged , text: 'Damaged' },
{ id: StatusChange.WornOut , text: 'WornOut' },
{ id: StatusChange.PM , text: 'PM' },
{ id: StatusChange.FixedOrReplaced , text: 'FixedOrReplaced' },
{ id: StatusChange.Inspected , text: 'Inspected' },
{ id: StatusChange.Other , text: 'Other' },
];
ngOnInit() {
this.theForm = this.formBuilder.group({
status: this. Status,
reason: ['', Validators.required],
note: '',
chainElongation: this.isChain === true ? this.elongation :
this.chainElongation.default
});
}
And finally my template file is using these readonly properties like this :
<div class="form-group col-auto">
<label class="form-label" for="status">{{ 'AssetStatus' | translate }}</label>
<select class="form-control form-control-sm" [id]="status"
formControlName="status" >
<option *ngFor="let item of statuses" [id]="formatHtmlId(item.text)"
[ngValue]="item.id">{{item.text}}<option>
</select>
</div>
<div class="form-group col-auto">
<label class="form-label" for = "reason">{{ 'Reason' | translate }}</label>
<select class="form-control" id="reason" formControlName="reason" required>
<option *ngFor="let item of reasons" id="formatHtmlId(item.text)"
[value]="item.id" >{{item.text | translate}}<option>
</select>
</div>
What is baffling me is that I am getting an empty option at the end of both the dropdowns. It is BootStrap that we are using but why I am getting an empty option at the end is something that I am not able to break. Does anyone have any suggesstion?
What I have tried:
I tried this way too,hoping to get some clues in ts files but I could not get anything.
reasonForTheStatus = StatusChange;
enumKeys = [];
this.enumKeys = Object.keys(this.reasonForTheStatus).filter(value => !isNaN(Number(value)));
Hiding using CSS is also not an option for me.
I cannot even see anything in value because by default if I am selecting that blank option having no text then the form becomes invalid.