Check radio button by default in a radio button group list in Angular?

Question

I am using Angular 7 and HTML. I am facing a problem with checked a default radio button when loading the page. I am able to get value but can't able to checked a radio button when loading the page. Please, anyone, guide me how to solve this.

StackBlitz Link

// my ts file

paymentModeStatus: string;
selectedValueForPaymentModeChange = 'cash';
paymentModeList: any = [];

public constructor() {}

ngOnInit() {
  this.getPaymentModeList();
}
getPaymentModeList() {
  this.paymentModeList = [{
      'checked': true,
      'name': 'Cash',
      'value': 'cash',
    },
    {
      'checked': false,
      'name': 'Pay to Accounts',
      'value': 'accounts',
    }
  ];
}

// my html file

<div style="font-weight: bold">Payment Mode:</div>

<label 
  style="padding: 0 5px 0 20px" 
  *ngFor="let paymentMode of paymentModeList">
  <input 
    type="radio" 
    name="paymentMode" 
    required="false"
    [(ngModel)]="paymentModeStatus" 
    [value]="paymentMode.name"
    (click)="paymentModeStatusAction(paymentMode.value)"             
    [checked]='paymentMode.checked'>
    {{paymentMode.name}}
</label>
<pre>{{ paymentModeStatus }}</pre>

SiddAjmera · Accepted Answer · 2019-02-04 15:49:50Z

4

Since you've specified [(ngModel)]="paymentModeStatus" and [value]="paymentMode.name", you'll have to set the paymentModeStatus as the name of whichever payment mode you want to set as default.

Just add this to your ngOnInit

this.paymentModeStatus = this.paymentModeList[0].name;

Here's a Working Sample StackBlitz for your ref.

answered Feb 4, 2019 at 15:49

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

Comments

chxzy · Accepted Answer · 2019-02-04 16:31:24Z

2

This is because the Checked attribute does not require a value

https://www.w3schools.com/tags/att_input_checked.asp

As long as the check attribute exists, the element will be checked.

From above link

<form action="/action_page.php">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

EDIT I have modified your html [buttons-checkbox.html] to displayed default checked by using the code below

<style>
  label {
    padding: 0 5px 0 20px
  }
</style>

<div><b>Payment Mode:</b></div>

  <label *ngFor="let paymentMode of paymentModeList">

    <input 
      type="radio" 
      name="paymentMode" 
      required="false" 
      [(ngModel)]="paymentModeStatus" 
      [checked]="paymentMode.checked == 'true'"
    />

    {{paymentMode.name}} {{paymentMode.checked}}

  </label>

<pre>{{ paymentModeStatus }}</pre>

edited Feb 4, 2019 at 16:31

answered Feb 4, 2019 at 15:50

chxzy

4894 silver badges13 bronze badges

2 Comments

SiddAjmera Over a year ago

Please also suggest how would one achieve what OP is looking for with an *ngFor in their template.

chxzy Over a year ago

Edited (I see why this is will be v. useful for OP) thanks!

Collectives™ on Stack Overflow

Check radio button by default in a radio button group list in Angular?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related