Search code examples
angularangular5jhipsterngmodel

Select tag default value in case of hardcoded options mgModel

By selecting a value by setting this.model.type = OPTION_NR1, angular sets HTML attribure ng-reflect-model in HTML to 0, which is default enum value and the Option1. The correct value for the HTML attribute is OPTION_NR1, which fills the drop-down with Option1 instead of leaving it empty.

What current setup does: <select .. ng-reflect-model="0">
What it should do: <select .. ng-reflect-model="OPTION_NR1"> 

<select [(ngModel)]="model.type"  required>
   <option value="OPTION_NR1" >Option1</option>
   <option value="OPTION_NR2" >Option2</option>
</select>
Solution

  • Update your enum to use TypeScript's string enum.

    If your enum looks like:

    export const enum Type {
    'OPTION_NR1',
    'OPTION_NR2'
}

    Change it to:

    export const enum Type {
    OPTION_NR1 = 'OPTION_NR1',
    OPTION_NR2 = 'OPTION_NR2'
}

    This was done in the generator in this pull request and is available in versions v5.0.0-beta.1 and above.