Enumeration values not rendering properly on the angular client: Missing interpolation

[ghacupha]

Overview of the issue

The options of an enumeration do not render properly on the template of an angular client. To display the values of the enumeration within an entity, the generator creates a loop with the *ngFor directive within the custom option tag. But the result is one only sees the class name of the enumeration. This is because the class name is included within the option tag without the brackets to indicate interplation {{ }}. This is what you see on the template of the update component for an entity that contains an enumeration field.

This is how the form-control looks like:

 <div class="row mb-3">
          <label class="form-label" for="field_frequency">Frequency</label>
          <select class="form-control" name="frequency" formControlName="frequency" id="field_frequency" data-cy="frequency">
             <option [ngValue]="null"></option>
             <option *ngFor="let frequency of frequencyValues" [value]="frequency">
                <! -- TODO {{ frequency }} -->
                frequency
              </option>
          </select>
          <div *ngIf="editForm.get('frequency')!.invalid && (editForm.get('frequency')!.dirty || editForm.get('frequency')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('frequency')?.errors?.required"> This field is required. </small>
          </div>
        </div>

Motivation for or Use Case

The view on the update form consists only of options listed as the name of the enumeration class and the user wouldn't know which option of an enumeration they wanted when creating a record.

Reproduce the error

It's assumed that you are starting with a project that uses the angular framework for the client, without translation

1. Create a jhipster project and do not enable translation. I have noted that ( on version 7.9.2 at least ) with translation enabled the interpolation is created correctly
2. Create an entity on the CLI with the jhipster entity ... command. Try "processFrequency" with field-type enumeration
3. The field values are : WEEKLY,MONTHLY,BI_MONTHLY,QUARTERLY,TRIMESTER,BI_ANNUAL,ANNUAL
4. Generate the entity
5. Check the form-control generated on the client in the update component of the entity.
6. The resulting yml file will be as follows:

{
  "changelogDate": "20220819122619",
  "dto": "mapstruct",
  "fields": [
    {
      "fieldName": "frequency",
      "fieldType": "frequency",
      "fieldValidateRules": ["required"],
      "fieldValues": "WEEKLY,MONTHLY,BI_MONTHLY,QUARTERLY,TRIMESTER,BI_ANNUAL,ANNUAL"
    }
  ],
  "jpaMetamodelFiltering": true,
  "name": "ProcessFrequency",
  "pagination": "pagination",
  "readOnly": false,
  "relationships": [],
  "service": "serviceImpl"
}

Related issues

Related issues that could have been reported have not been sighted.

Suggest a Fix

As earlier suggested, we need to ensure that the values of the enumeration are correctly rendered by using the interpolation "braces", for instance as shown below. I do not know the part of code in the generator where that is rendered or if an attempt had been made, and something is skipped by the EJS compiler, but the following should be the result.

    <div class="row mb-3">
          <label class="form-label" for="field_frequency">Frequency</label>
          <select class="form-control" name="frequency" formControlName="frequency" id="field_frequency" data-cy="frequency">
              <option [ngValue]="null"></option>
              <option *ngFor="let frequency of frequencyValues" [value]="frequency">
                <!-- DONE -->
                {{ frequency }}
              </option>
          </select>
          <div *ngIf="editForm.get('frequency')!.invalid && (editForm.get('frequency')!.dirty || editForm.get('frequency')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('frequency')?.errors?.required"> This field is required. </small>
          </div>
        </div>

JHipster Version(s)

Am using version 7.9.2

JHipster configuration

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

Running on windows 10 pro version 1803, Google chrome browser version 104.0.5112.81 (Official Build) (64-bit)

yo-rc.json

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "erpSystem",
    "blueprints": [],
    "buildTool": "maven",
    "cacheProvider": "caffeine",
    "clientFramework": "angularX",
    "clientPackageManager": "npm",
    "clientTheme": "cosmo",
    "clientThemeVariant": "dark",
    "creationTimestamp": 1660907596557,
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "devServerPort": 4200,
    "dtoSuffix": "DTO",
    "enableGradleEnterprise": false,
    "enableHibernateCache": true,
    "enableSwaggerCodegen": false,
    "enableTranslation": false,
    "entities": ["ProcessFrequency"],
    "entitySuffix": "",
    "jhiPrefix": "jhi",
    "jhipsterVersion": "7.9.2",
    "languages": [],
    "lastLiquibaseTimestamp": 1660911979000,
    "messageBroker": false,
    "microfrontend": false,
    "microfrontends": [],
    "nativeLanguage": "en",
    "otherModules": [],
    "packageName": "io.github.erp",
    "pages": [],
    "prodDatabaseType": "postgresql",
    "reactive": false,
    "searchEngine": "elasticsearch",
    "serverPort": "8080",
    "serverSideOptions": ["searchEngine:elasticsearch", "websocket:spring-websocket"],
    "serviceDiscoveryType": "eureka",
    "skipCheckLengthOfIdentifier": false,
    "skipFakeData": false,
    "skipUserManagement": false,
    "testFrameworks": ["protractor", "gatling", "cucumber"],
    "websocket": "spring-websocket",
    "withAdminUi": true
  }
}

Entity file: ProcessFrequency.json

{
  "changelogDate": "20220819122619",
  "dto": "mapstruct",
  "fields": [
    {
      "fieldName": "frequency",
      "fieldType": "frequency",
      "fieldValidateRules": ["required"],
      "fieldValues": "WEEKLY,MONTHLY,BI_MONTHLY,QUARTERLY,TRIMESTER,BI_ANNUAL,ANNUAL"
    }
  ],
  "jpaMetamodelFiltering": true,
  "name": "ProcessFrequency",
  "pagination": "pagination",
  "readOnly": false,
  "relationships": [],
  "service": "serviceImpl"
}

jhipster-info.txt

• [] Checking this box is mandatory (this is just to show you read everything)

[jayveeAtWork]

I've only just started using JHipster and immediately ran into this issue. With your detailed bug report, I quickly had a trace of what is going on and how I might manually fix it for now. Thank you for that!

At the same time, I'm a little bit worried about this bug report staying open without any response for quite so long, while it's probably an easy fix (for someone in the know).

[mraible]

@jayveeAtWork The reason this hasn't been fixed is because we're all volunteers, with limited time, and no one has contributed a fix. I'm happy to review a PR that fixes this issue. See our contributing guide for how to do this.

https://github.com/jhipster/generator-jhipster/blob/main/CONTRIBUTING.md

[mshima]

It happens when translation is disabled, which probably isn't commonly used. Had become much more useful recently with native translation.

The offending like is https://github.com/jhipster/generator-jhipster/blob/fa1d0411a17c294d0d7ad4b88c90d3c619887868/generators/client/templates/entity/angular/src/main/webapp/app/entities/update/entity-management-update.component.html.ejs#L53. It's quite easy, maybe you could provide the PR.

[ghacupha]

@mraible and @mshima I know exactly what you mean when you say limited time. It's the same case here. Am also not very confident in ejs, but will give it a try, now that I have seen that entity-management-update-html line.

[ghacupha]

Mmh! Ran into #19981. I try later when I figure out this cjs thing since I can't run builder tests

[ghacupha]

Ok done. Currently, run the pr #20190

[mshima]

Thanks @ghacupha