Angular2 how to set radio button as checked with a default value

Question

I am new to Angular2, I have a radio group and I am trying to bind it using [(ngModel)] to entity person.testBoolean so that I can save it in the database. I want to set a default value as selected and I have seen few examples and found that they set the default value to [(ngModel)] but in my case I want to bind it to my entity hence I cannot use [(ngModel)]. Can anybody advise alternative options. checked = idx does not work.

<div class="form-group">
    <label for="radioboolean">Boolean: </label>
    <div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
       <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="idx === 1" [value]="entry.id" />{{ entry.description }}
    </div>
</div>

Ts code:

 entries = [
              {id: 1, description: 'True' },
              {id: 2,description: 'False'},
              {id: 3,description: 'Undefined'}
           ];

Person is my entity:

export interface IPerson {

    id: string;
    name: string;
    testNumber: number | null;
    testDatetime: Date | null;
    testBoolean: boolean | null;
    // Refs to parent entities
    team: ITeam;
    teamId: string;

};

yes, that's right we can directly use the id column but it did not work :-( , default radio button is still not selected/checked — Auo
– Auo, Commented Oct 12, 2017 at 10:13

Swoox · Accepted Answer · 2017-10-10 13:58:55Z

6

You can use the id of entry like this: [checked]="entry.id === 1"

<div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
                <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="entry.id === 1" [value]="entry.id" />{{ entry.description }}
            </div>

answered Oct 10, 2017 at 13:58

Swoox

3,7602 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Auo Over a year ago

yes, that's right we can directly use the id column but it did not work :-( , default radio button is still not selected/checked

Swoox Over a year ago

Tried [checked]="entry.id === default"? Where default = this.default in component.

Auo Over a year ago

Hi Swoox, Thanks, I tried as above but for some reason "this.default" is set to undefined hence default radio buttons is not selected. Typescript file default: 3; entries = [{ id: 1, description: 'True' },{ id: 2, description: 'False' }, { id: 3, description: 'Undefined' }]; [checked]="entry.id === default"

Swoox Over a year ago

With default I meany make a value on your component above constructor private defaullt: any. then where you set your entries say this.default = 1. So the checkbox with entry id 1 will be checked.

Auo Over a year ago

Do you mean like this? Previously I declared a variable within the class , above the constructor. Do you mean declare within the constructor: constructor(private defaultradio: any) { } ngOnInit() { this.defaultradio = 1; .....

|

krsna · Accepted Answer · 2020-03-15 06:24:21Z

4

If you always want the first item to be selected you can use.

In your loop, *ngFor="let entry of entries; let first = first;

and in your radio button group - [checked] = "first"

for example:

<div *ngFor="let entry of entries; let first = first; let idx = index" class="radio-inline" >
<input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="first" [value]="entry.id" />{{ entry.description }}
</div>

edited Mar 15, 2020 at 6:24

krsna

4,3437 gold badges61 silver badges107 bronze badges

answered May 17, 2018 at 9:25

Duncan Faulkner

1341 silver badge3 bronze badges

1 Comment

krsna Over a year ago

Worked like charm!

Hai Dinh · Accepted Answer · 2018-12-18 04:12:01Z

An example: in Template file:

 <form [formGroup]="formGender">
        <input type="radio" value="1" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">MALE</span>
        <input type="radio" value="0" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">FEMALE</span>
 </form>

In Component.ts file:

ngOnInit() {
    this.userBasicInformation.gender = '0';
}

And result, the radio button will select default at gender value = 0 (Female) as following image:

Mohammed Abir · Accepted Answer · 2020-09-03 12:49:08Z

export class ConfirmationmodalComponent implements OnInit {
  cancel_associated_session: any = false;

  constructor(
  ) {}

  ngOnInit(): void {
  }
}

<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio1"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="true"
  />
  <label class="form-check-label" for="inlineRadio1">
    Yes
  </label>
</div>
<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio2"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="false"
  />
  <label class="form-check-label" for="inlineRadio2">
    No
  </label>
</div>

Collectives™ on Stack Overflow

Angular2 how to set radio button as checked with a default value

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Related