Angular: radio button [checked] not set with template reference variable

Question

As the title suggests, I have a scenario where, if the "Select All" radio button is checked, it must check all of the radio buttons in the columns below. Unfortunately, this is not working.

Here is a sample:

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

And here is a link to a sample StackBlitz.

I am not sure why, for instance, all of the 'None' radio buttons are not checked when setting the [checked] as follow:

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

really I don't understand your code, neither the answer give as good. If you has a radio buttons is for only select one of the options -else use type="checkbox"-. In Angular, usually we use [ngModel] or ReactiveForms, and the [checked] is not used. I supouse you want to do some like I put in this stackblitz:stackblitz.com/edit/… — Eliseo
– Eliseo, Commented Jun 27, 2019 at 20:14
The real question is: What is the aim of your code? Know the options select?, simply show a radio buttons? — Eliseo
– Eliseo, Commented Jun 27, 2019 at 20:16
This is not the actual code, I was just trying to give a demostration of my problem. — monstertjie_za
– monstertjie_za, Commented Jun 28, 2019 at 5:12

Eliseo · Accepted Answer · 2019-06-28 06:44:59Z

disclamer it's not an answer, is an answer to a comment about use [(ngModel)] into a ReactiveForm.

@monstertjie_za, the doc indicate that you don't use in the same input TOGETHER formControlName and [(ngModel)], Not that you can not use a input into a reactive form. Imagine your example. You has a reactiveForm like

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

But you want allow the user a rapid selection

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

where you has a function like

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

You can see the stackblitz demo

You see that we use a input with [(ngModel)] to help the user to change the value of form.accessAdmin and form.accessPersonal. It is not related with the link you show me and is perfectly formed -even I'll say that it's good to help the user-

Maihan Nijat · Accepted Answer · 2019-06-27 18:52:44Z

Check for changes:

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

And 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){}
}

piedpiper · Accepted Answer · 2019-06-27 18:52:00Z

0

you have to use ngModel to update the radio button values like this -

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;
}

answered Jun 27, 2019 at 18:52

piedpiper

5246 silver badges19 bronze badges

4 Comments

monstertjie_za Over a year ago

I know my sample code is not a Reactive form, but in my application it is an reactive form, and using ngModel in Reactive forms is not a good idea

Eliseo Over a year ago

@piedpiper, they are "radio buttons", the [ngModel] must be over the same variable, else use type "checkbox". NOTE: Each time I see a [checked] in Angular, I want to kill a little cat

Eliseo Over a year ago

@monstertjie_za, How is your form? There's no problem using a input [ngModel] inside a reactiveForm always the variable don't belong to the reactiveForm and you use [ngModelOptions]="{standalone:true}"

Eliseo Over a year ago

@monstertjie_za, the doc indicate that you don't use in the same input TOGETHER formControlName and [(ngModel)], Not that you can not use a input into a reactive form, see my answer

Collectives™ on Stack Overflow

Angular: radio button [checked] not set with template reference variable

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related