javascript - 输入 radio 中的 ngModel？

Question

我正在使用 Angular 6 开发应用程序。我遇到了一个大问题。使用模板驱动的表单 我希望在按下提交按钮 时可以发送在单选按钮中选择的项目。我和<input type="text" [(ngModel)] = "value" />一起工作就没事了(value 是我组件的数据字段)，但如果我尝试这样做:

<div class="form-group">
    <div *ngFor = "let option of options">
    <div class="radio">
        <input type = "radio"
               name = "radio"
               [(ngModel)] = "value"
               />

        <label for="{{option.id}}">{{option.id}}</div>
        </label>

    </div>
    </div>
</div>

结果是个bug!我什至无法通过移动选择器来单击多个按钮!一切都卡住了!显然它不适用于表格。如果我删除 [(ngModel)] = "value"它在图形上有效，但如果我在使用 (ngSubmit) 的模板驱动表单中输入此代码，则在没有 ngModel 指令的情况下它不起作用。非常感谢。

Answer 1

您缺少每个单选按钮的值，因此绑定(bind)无法正常工作。无法确定应检查哪个输入，因此不会检查任何输入。将模板更新为:

<div *ngFor="let option of options">
    <div class="radio">
        <input type="radio"
           name="radio"
           id="radio-{{option.id}}"
           [(ngModel)]="value"
           [value]="option.value"
           />

    <label for="radio-{{option.id}}">{{option.id}}
    </label>

</div>

Stackblitz Demo