Angular：单选按钮[选中]未使用模板引用变量设置答案

【问题标题】：Angular: radio button [checked] not set with template reference variableAngular：单选按钮[选中]未使用模板引用变量设置
【发布时间】：2019-11-09 19:39:28
【问题描述】：

正如标题所暗示的，我有一个场景，如果选中“全选”单选按钮，它必须选中下面列中的所有单选按钮。不幸的是，这不起作用。

这是一个示例：

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

here 是一个指向 StackBlitz 示例的链接。

我不知道为什么，例如，当设置[checked] 时，所有的“无”单选按钮都没有被选中，如下所示：

<input type="radio" name="access1" value="None" [checked]="none.checked"/>

【问题讨论】：

真的我不明白你的代码，答案也没有那么好。如果您有一个单选按钮，则仅选择其中一个选项 - 否则使用 type="checkbox"-。在 Angular 中，通常我们使用 [ngModel] 或 ReactiveForms，而 [checked] 是不用的。我想你想做一些我在这个 stackblitz 里放的东西：stackblitz.com/edit/…
真正的问题是：你的代码的目的是什么？知道选项选择吗？只需显示一个单选按钮？
这不是实际代码，我只是想演示一下我的问题。

标签： html angular radio-button angular-template-variable

【解决方案1】：

disclamer 这不是答案，是对关于将 [(ngModel)] 用于 ReactiveForm 的评论的答案。

@monstertjie_za，文档表明您不要在同一个输入中使用 TOGETHER formControlName 和 [(ngModel)]，并不是说您不能在反应式表单中使用输入。想象一下你的例子。你有一个像

这样的响应式表单

form=new FormGroup({
    accessAdmin:new FormControl(),
    accessPersonal:new FormControl()
})

但你想让用户快速选择

<form [formGroup]="form">
    <!--a input that not belong to the ReactiveForm that use [(ngModel)]-->
    <div>
        <label><input type="radio" value="None" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>None</label>
    <label><input type="radio" value="ReadOnly" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>ReadOnly</label>
    <label><input type="radio" value="Access" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>Access</label>
  </div>
        <!--inputs that belong to our formGroup-->
  <div>
    <label><input type="radio" value="None" formControlName="accessAdmin"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessAdmin"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessAdmin"/>Access</label>
  </div>
  <div>
    <label><input type="radio" value="None" formControlName="accessPersonal"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessPersonal"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessPersonal"/>Access</label>
  </div>
</form>
<pre>
  {{form?.value|json}}
</pre>

你有这样的功能

change(value) {
    this.form.get('accessAdmin').setValue(value);
    this.form.get('accessPersonal').setValue(value);
  }

你可以看到stackblitz demo

您看到我们使用带有 [(ngModel)] 的输入来帮助用户更改 form.accessAdmin 和 form.accessPersonal 的值。它与您显示给我的链接无关，并且格式完美-即使我会说帮助用户很好-

【讨论】：

明白。感谢您的努力

【解决方案2】：

检查更改：

<table (click)="cd.detectChanges()">
    <thead>
        <th>Role</th>
        <th colspan="3">Access</th>
    </thead>
    <tbody>
        <tr>
            <td>Select All</td>
            <td>
                <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

还有 TS：

import {ChangeDetectorRef, Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(protected cd: ChangeDetectorRef){}
}

【讨论】：

【解决方案3】：

你必须使用ngModel 来更新这样的单选按钮值 -

app.component.html

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input type="radio" name="access0" value="allNone" 
        [(ngModel)]='none'/>
        <label>None</label>
      </td>
      <td>
        <input [(ngModel)]='readonly' type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input [(ngModel)]='full' type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="1" [checked]='none'/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]='readonly'/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readonly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public none=false;
  public readonly=false;
  public full=false;
}

【讨论】：

我知道我的示例代码不是反应式表单，但在我的应用程序中它是反应式表单，在反应式表单中使用 ngModel 不是一个好主意
@piedpiper，它们是“单选按钮”，[ngModel] 必须在同一个变量上，否则使用类型“复选框”。注意：每次在 Angular 中看到 [checked]，我都想杀死一只小猫
@monstertjie_za，你的表格怎么样？在 reactiveForm 中使用输入 [ngModel] 没有问题，变量不属于 reactiveForm 并且您使用 [ngModelOptions]="{standalone:true}"
@monstertjie_za，文档表明您不在同一个输入中使用 TOGETHER formControlName 和 [(ngModel)]，并不是说您不能将输入用于反应形式，请参阅我的答案