单选按钮的 JHipster 字段集答案

【问题标题】：JHipster fieldset of radio buttons单选按钮的 JHipster 字段集
【发布时间】：2020-05-02 08:41:25
【问题描述】：

在一个 jhipster 项目中，我有一个值为“A、B、C、D、E”的枚举字段。使用 Jhipster 的“标准”方法，将使用 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>

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

【问题讨论】：

标签： angular radio-button jhipster fieldset

【解决方案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

【讨论】：