Question

正如标题所示，我有一种情况，如果选中了“全选”单选按钮，则必须检查以下列中的所有单选按钮。不幸的是，这不起作用。

以下是示例：

<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"/>

Answer 1

disclamer ，这不是答案，而是对在ReactiveForm中使用[[ngModel）]的评论的答案。

@monstertjie_za，该文档指示您不要在同一输入中同时使用formControlName和[（ngModel）]，不是您不能将其用于反应形式。想象一下您的例子。您有一个类似

的reactForm

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的值。它与您显示给我的链接无关，并且格式完美-即使我说对用户有帮助也很好-

Answer 2

您必须使用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;
}

Answer 3

检查更改：

<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 个答案: