单选按钮的 JHipster 字段集

JHipster fieldset of radio buttons

在一个 jhipster 项目中,我有一个值为 "A, B, C, D, E" 的枚举字段。 使用 Jhipster 的 "standard" 方法,将使用 Select/Options:

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="myApp.myEntity.myField" for="field_myField">myField</label>
                    <select class="form-control" name="myField" formControlName="myField" id="field_myField">
                        <option value="A">{{'myApp.MyFieldType.A' | translate}}</option>
                        <option value="B">{{'myApp.MyFieldType.B' | translate}}</option>
                        <option value="C">{{'myApp.MyFieldType.C' | translate}}</option>
                        <option value="D">{{'myApp.MyFieldType.D' | translate}}</option>
                        <option value="E">{{'myApp.MyFieldType.E' | translate}}</option>
                    </select>
                </div>

代替这些,我需要使用单选按钮,所以我将其更改为:

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="myApp.myEntity.myField" for="field_myField">myField</label>
                    <fieldset class="form-control" name="myField" formControlName="myField" id="field_myField">
                        <input type="radio" value="A" name="field_myField">{{'myApp.MyFieldType.A' | translate}}</input>
                        <input type="radio" value="B" name="field_myField">{{'myApp.MyFieldType.B' | translate}}</input>
                        <input type="radio" value="C" name="field_myField">{{'myApp.MyFieldType.C' | translate}}</input>
                        <input type="radio" value="D" name="field_myField">{{'myApp.MyFieldType.D' | translate}}</input>
                        <input type="radio" value="E" name="field_myField">{{'myApp.MyFieldType.E' | translate}}</input>
                    </fieldset>
                </div>

图形上没问题,但是从数据库中读取的值没有显示(没有选择单选按钮)并且更改没有传递到后端。 也许这不是显示单选按钮的正确方法? 怎么做到的?

使用:

<div class="form-group">
  <label class="form-control-label" jhiTranslate="myApp.myEntity.myField" for="field_myField">myField</label>
    <fieldset class="form-control" name="myField" id="field_myField">
      <input type="radio" value="A" formControlName="myField">{{'myApp.MyFieldType.A' | translate}}</input>
      <input type="radio" value="B" formControlName="myField">{{'myApp.MyFieldType.B' | translate}}</input>
      <input type="radio" value="C" formControlName="myField">{{'myApp.MyFieldType.C' | translate}}</input>
      <input type="radio" value="D" formControlName="myField">{{'myApp.MyFieldType.D' | translate}}</input>
      <input type="radio" value="E" formControlName="myField">{{'myApp.MyFieldType.E' | translate}}</input>
    </fieldset>
  </div>

参见示例https://dev.to/bitovi/angular-forms-several-ways-reactive-nested-across-routes-42g3