CODEWITHSUNDEEP
angularangular2-forms
Auo
Auo

Reputation: 409

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

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;

};

Upvotes: 4

Views: 23253

Answers (4)

Mohammed Abir
Mohammed Abir

Reputation: 423

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>

Upvotes: 1

Duncan Faulkner
Duncan Faulkner

Reputation: 134

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>

Upvotes: 4

Hai Dinh
Hai Dinh

Reputation: 1513

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:

enter image description here

Upvotes: 2

Swoox
Swoox

Reputation: 3740

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>

Upvotes: 6

Related Questions