CODEWITHSUNDEEP
angular
Kiran Dash
Kiran Dash

Reputation: 4956

Angular 2 check radio button by default

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

Upvotes: 11

Views: 44999

Answers (5)

Сергей Седых
Сергей Седых

Reputation: 155

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>

Upvotes: 0

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

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.

Upvotes: 0

Arash
Arash

Reputation: 1826

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.

Upvotes: 7

rrd
rrd

Reputation: 5957

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

[attr.checked]="true"

Upvotes: 4

user4676340
user4676340

Reputation:

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

unitTrustsPnl = 0;

Upvotes: 4

Related Questions