单选按钮的 JHipster 字段集

Question

在一个 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>

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

Answer 1

使用：

<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

单选按钮的 JHipster 字段集

JHipster fieldset of radio buttons

fieldset

radio-button

jhipster

angular