Angular Radio Button: Checked

How get checked value from radio button angular

You can bind the data of radio button. Just add the value for radio button and change in the ngModel

html

<input class="form-check-input" type="radio" value="dog" 
[(ngModel)]="dog.value" name="gob" value="i" [checked]="true" 
(change)="onItemChange($event.target.value)"/>

ts

onItemChange(value){
   console.log(" Value is : ", value );
}

Angular 4 default radio button checked by default

You can use [(ngModel)], but you'll need to update your value to [value] otherwise the value is evaluating as a string. It would look like this:

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="true" [(ngModel)]="rule.mode">
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>

If rule.mode is true, then that radio is selected. If it's false, then the other.

The difference really comes down to the value. value="true" really evaluates to the string 'true', whereas [value]="true" evaluates to the boolean true.

How to check default first radio button in angular material

You can add the index to *ngFor and set checked when index is equal to zero.

<div class="input">
  <mat-radio-group class="radio-group">
    <mat-radio-button
      class="radio-button"
      *ngFor="let bus of buses; index as i"
      [value]="bus"
      [checked]="i === 0"
    >
      {{ bus }}
    </mat-radio-button>
  </mat-radio-group>
</div>

Stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-njehsp?file=src/app/app.component.html

Angular how to set radio button checked in Reactive Form

You can use the setValue() method after the API calls like this:

this.form.controls.choose.setValue('1');

Give this a read for a detailed answer regarding how to set the value to form control in Reactive Forms in Angular. Happy coding :)

How to check angular radio button by default?

<mat-radio-button class="mat-button-custom" checked>Problems</mat-radio-button>

This checks the radio button when the page loads. If you remove checked the button will not be checked.

Showing elements depending on which mat-radio-button is checked

You basically have two options here.

First Approach (Using ngModel)

using ngModel on mat-radio-group essentially keeping a component variable in sync with the template. You can do something like this

something.component.html

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

and in something.component.ts declare the variable

selectedValue: number;

Second Approach (using change event)

something.component.html

<mat-radio-group (change)="onChange($event)">
  <mat-radio-button [value]="0">BUTTON A</mat-radio-button>
  <mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>

<h1 *ngIf="selectedValue === 0">Button A is selected</h1>
<h1 *ngIf="selectedValue === 1">Button B is selected</h1>

change event is triggered whenever any selection of radio button inside the radio group is changed. Which calls a function onChange.

something.component.ts

export class Something {
  selectedValue: number;

  onChange(event: MatRadioChange) {
    this.selectedValue = event.value;
  }
}

onChange function basically assigns the value selected to the selectedValue variable

Although you can capture the change event at the mat-radio-button level if you don't want to use mat-radio-group I wouldn't recommend it. You have to capture change event for each mat-radio-button you add. Generally enclosing mat-radio-group is considered a best practise.

Angular 13: Radio [checked] not working with formControlName

You can remove the checked attribute. Actually, if you have the value in the form control, it should automatically be selected. If it doesn't work, you need to check the type of the value.In template you defined value as number and please confirm that you have number type in form control also.

Also I can see that you didn't declare the radioModel in ts file. Therefore instead of radioModel, try using model.

UPDATE

ngOnInit(): void {
  this.radioModel = new Model();
  this.radioModel.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  this.f.radioValue1.valueChanges.subscribe(() => {
    console.log('radioValue1: ' + this.f.radioValue1.value);
  });
}

Use this in ts file.

Radio-button checked overriden by ngModel

Since you're binding the radio group to the units property, you don't need to use the checked attribute in your template.

In order to select one of the options by default, you just need to assign the value of that option to the units property:

private someFunction(): void {
  // ...
  this.units = 'metric'; 
}

<!--Radio buttons for units-->
<ion-list-header style="color: white">
  Units
</ion-list-header>
<ion-list radio-group [(ngModel)]="units">
  <ion-item>
    <ion-label>Metric</ion-label>
    <ion-radio value= "metric"></ion-radio>
    </ion-item>
  <ion-item>
    <ion-label>Imperial</ion-label>
    <ion-radio value="imperial"></ion-radio>
  </ion-item>
</ion-list>

---

Related Topics