Make radio button selected by default with template driven form Angular

Question

I have a form using a template driven form and I whant to make a radio button selected by default but it doesnt work, this is a part of my code:

   <div class="donut-form-promos">
    <span>Promo:</span>
    <div class="donut-form-promos-choices">
      <input
        type="radio"
        name="promo"
        [value]="'newPromo'"
        rquired
        ngModel
        #promo="ngModel"
      /><span>New</span>
      <input
        type="radio"
        name="promo"
        [value]="'limitedPromo'"
        required
        ngModel
        #promo="ngModel"
      /><span>Limited</span>
      <input
        type="radio"
        name="promo"
        [value]="'clubPromo'"
        required
        ngModel
        #promo="ngModel"
      /><span>Club memeber</span>
      <input
        type="radio"
        name="promo"
        [value]="undefined"
        required
        ngModel
        #promo="ngModel"
        [checked]="'checked'"
      /><span>None</span>
    </div>
  </div>

I upload the example in stakeblitz too , this is a link: https://stackblitz.com/edit/angular-ivy-dd8u6v?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Thank you.

Answer 1

Angular will treat all the radio button elements with same name attribute as a common control. So you can say that a bunch of radio button elements with same name is entirely a single control system input with one single value as output (similar to select with multiple options). This value decided by the value of the selected radio button element. But in angular, it's opposite is also true i.e., the value of the control will decide which of it's radio button is selected. So for example, if a radio button A has value "1" and radio button B has value 2, and they are part of same control i.e, have same name, you can set the value of the control as "2" during initialization of the component and it will reflect on it's radio buttons, so the radio button B with value "2" will automatically get selected.

Bind the directive ngModel to a default value in the radio button element so that it will automatically be selected in case the default value is equal to it's value such as:

[ngModel]="defaultValue"

Your Component ts example becomes:

import { Component, VERSION } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  defaultPromo = 'limitedPromo';
  icons: any[] = [
    { id: 1, name: 'caramel-swirl_2' },
    { id: 2, name: 'caramel-swirl-2' },
    { id: 3, name: 'caramel-swirl-3' },
  ];
  onNgSubmit(form: NgForm) {
    if (form.valid) {
      console.log(form);
    } else if (form.invalid) {
      form.form.markAllAsTouched();
    }
  }
}

And your template:

<form class="donut-form" (ngSubmit)="onNgSubmit(formDonut)" #formDonut="ngForm">
  <label>
    <span> Name :</span>
    <input
      type="text"
      name="name"
      class="input"
      minlength="5"
      required
      ngModel
      #name="ngModel"
    />
    <ng-container *ngIf="name.touched && name.invalid">
      <div class="donut-form-error" *ngIf="name.errors?.required">
        The name is required
      </div>
      <div *ngIf="name.errors?.minlength">Put more then 5 character</div>
    </ng-container>
  </label>
  <label>
    <span> icons :</span>
    <select
      name="icon"
      class="input input--select"
      required
      ngModel
      #icon="ngModel"
    >
      <option *ngFor="let icon of icons" [ngValue]="icon.name">
        {{ icon.name }}
      </option>
    </select>
    <ng-container *ngIf="icon.touched && icon.invalid">
      <div class="donut-form-error" *ngIf="icon.errors?.required">
        The icons is required
      </div>
    </ng-container>
  </label>
  <label>
    <span> Price :</span>
    <input
      type="number"
      name="price"
      class="input"
      required
      ngModel
      #price="ngModel"
    />
    <ng-container *ngIf="price.touched && price.invalid">
      <div class="donut-form-error" *ngIf="price.errors?.required">
        The price is required
      </div>
    </ng-container>
  </label>
  <div class="donut-form-promos">
    <span>Promo:</span>
    <div class="donut-form-promos-choices">
      <input
        type="radio"
        name="promo"
        [value]="'newPromo'"
        rquired
        [ngModel]="defaultPromo"
        #promo="ngModel"
      /><span>New</span>
      <input
        type="radio"
        name="promo"
        [value]="'limitedPromo'"
        required
        [ngModel]="defaultPromo"
        #promo="ngModel"
      /><span>Limited</span>
      <input
        type="radio"
        name="promo"
        [value]="'clubPromo'"
        required
        [ngModel]="defaultPromo"
        #promo="ngModel"
      /><span>Club memeber</span>
      <input
        type="radio"
        name="promo"
        [value]="undefined"
        required
        [ngModel]="defaultPromo"
        #promo="ngModel"
        [checked]="'checked'"
      /><span>None</span>
    </div>
  </div>
  <label class="textaria-section">
    <span> Description :</span>
    <textarea
      name="description"
      class="input input--texteria"
      required
      ngModel
    ></textarea>
  </label>
  <button type="submit" class="btn btn--green">Create</button>
  <pre> {{ formDonut.form.value | json }}</pre>
</form>