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>

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

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 Demo

Answer 2

单选按钮的作用不同。需要添加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"，以确保只能选择该组中的一个。

Answer 3

在ts文件中：

radio_button_value = null;

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

在html文件中：

请注意标记“名称”，这将在另一个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>

Angular 6：输入广播中的ngModel？

3 个答案:

Stackblitz Demo