I want to implement select menu which uses enum data to display data and saved number based on the selected String:
HTML code:
<div class="form-group state_raw">
<label for="state_raw">State</label>
<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
<option selected></option>
<option [value]="type" *ngFor="let type of types">{{type | formatType}}</option>
</select>
</div>
Enum which displaying data and translated number value:
export enum MerchantStatusType {
'Being set up' = 1,
'Live for processing' = 2,
'Trading suspended' = 3,
'Account suspended' = 4
}
Object for the elect menu:
export class MerchantNew {
constructor(
public name: string,
public address_state: string,
) {}
}
How can this be implemented? I want to display String but save number into database?
EDIT: I tried this:
ENUM:
export enum MerchantStateType {
being_set_up = 1,
live_for_processing = 2,
trading_suspended = 3,
account_suspended = 4,
}
export const MerchantStateType2LabelMapping = {
[MerchantStateType.being_set_up]: "Being set up",
[MerchantStateType.live_for_processing]: "Live for processing",
[MerchantStateType.trading_suspended]: "Trading suspended",
[MerchantStateType.account_suspended]: "Account suspended",
}
Component:
public MerchantStateType2LabelMapping = MerchantStateType2LabelMapping;
public stateTypes = Object.values(MerchantStateType);
HTML code:
<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
<!--<option selected></option>-->
<option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>
But I get 4 empty rows and 4 lines of the states.
merchant
andtypes
?