输入无线电中的 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"图形方式删除它，它可以工作，但如果没有 ngModel 指令，如果我在使用 (ngSubmit) 的模板驱动表单中输入此代码，它就不起作用。多谢。

Answer 1

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

<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 演示

Answer 2

单选按钮的工作方式不同。需要添加一个value才能使其工作。如果你想从角度使用指定一个值[value]。

我已经让它在stackblitz 的示例中运行：

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

<hr>

<h2>Values for options</h2>

<ul>
  <ng-container *ngFor="let option of options; let i=index">
    <li *ngIf="option.value !== ''">Value for {{option.id}}: {{option.value}}</li>
  </ng-container>
</ul>

成分

value: any;
options = [
{
    id: "test1",
    value: ''
},
{
    id: "test2",
    value: ''
},
{
    id: "test3",
    value: ''
}];

扩展/提示：

您甚至可以使用[(ngModel)] = "value"将最后选择的值分配给value。

为这些单选按钮指定相同的名称，name="radio"以确保只能选择该组中的一个。