Angular 2 check radio button by default

Question

I am trying to check my radio button with zero value by default. I am trying to use the [checked]='true' attribute. But that does not work.

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl"  [checked]='true'>
<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="1" [(ngModel)]="unitTrustsPnl">

DEMO

https://stackblitz.com/edit/angular-jj9gib

Answer 1

Each of you'r radio buttons have an attribute calld value, that means if you set ngModel's value (unitTrustsPnl) to each radio's value, that radio will be checked.

Eg you have

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl">

So if you set unitTrustsPnl value to 0 , this radio will check and so on.

Update : You'r variable (unitTrustsPnl) should be in type of number, declare it like

public unitTrustsPnl: number;

Its reason is because you mentioned [value]="0" HTML considered that you have a number type variable.

Answer 2

Since the buttons are bound to a variable, try setting the variable instead :

unitTrustsPnl = 0;

Answer 3

Try adding this in addition to the [checked] you already have:

[attr.checked]="true"

Answer 4

Do something like [(ngModel)]=“variableWithZeroValue” [checked]=“variableWithZeroValue==0? true: false” and initialize variableWithZeroValue=0 in the constructor of the class.

But, this will always check the checkbox whenever the variableWithZeroValue has value equal to zero.

Hope, it helps.

Answer 5

parent.component.ts

import {Component} from '@angular/core';
import {Form, NgForm} from '@angular/forms';

interface Gender {
  id: number;
  name: string;
  title: string;
  value: string;
}

const gendersList = [
  {id: 1, name: 'gender', value: 'male', title: 'Male'},
  {id: 2, name: 'gender', value: 'female', title: 'Female'}
];

@Component({
  selector: 'app-switch-case',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  radioList: Gender[] = gendersList;

  constructor() { }

  onSubmit(form: NgForm): void {
    console.log('onSubmit form',form)
  }

}

parent.component.html

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
    <div>
        <label for="gender">
            <app-radio *ngFor="let radio of radioList"
                [title]="radio.title"
                [groupName]="radio.name"
                [value]="radio.value"
              [defaultValue]="'female'"
            ></app-radio>
        </label>
    </div>
    <button [disabled]="!itemForm.valid" type="submit">Submit</button>

</form>

radio.component.ts

import {Componen, Input} from '@angular/core';
import {ControlContainer, NgForm} from '@angular/forms';

@Component({
  selector: 'app-radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class RadioComponent {
 @Input() title: string;
 @Input() groupName: string;
 @Input() value: string;
 @Input() defaultValue: string;
 @Input() isRequired: boolean;
  constructor() { }

}

radio.component.html

<div>
    <input
        type="radio"
        [value]="value"
        [name]="groupName"
        [ngModel]="defaultValue"
        [required]="isRequired"
    >
    <span>{{title}}</span>
</div>