输入收音机中的ngModel？答案

【问题标题】：ngModel in input radio?输入收音机中的ngModel？
【发布时间】：2019-03-07 19:13:51
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript typescript angular6 frontend

【解决方案1】：

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

我已经让它在example of 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"，以确保只能选择该组中的一个。

【讨论】：

【解决方案2】：

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

<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

【讨论】：

@NoHoney_k1ll - 要使单选按钮位于同一组中，它们必须具有相同的名称。

【解决方案3】：

ts文件内部：

radio_button_value = null;

box_options = [
{
    "name": "Word",
    "value": "word",
},
{
    "name": "Line",
    "value": "line"
},
]

html文件内部：

注意标签'name'，它会在另一个for循环中引起我们的极大关注。

<div *ngFor="let box_opt of box_options; let i=index">
      <input name="option-{{i}}" type="radio" [value]="box_opt.value" [(ngModel)]="radio_button_value">
      {{box_opt.name}}
      <br>
</div>

【讨论】：