I am working on a form in Angular.

In form.component.ts I have:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FormService } from '../services/form.service';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public accountTypes!: any;
  public selectedAccountType: any;

  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    accountInfo: new FormGroup({
      account_type: new FormControl(''),
    }),
  });

  constructor(private formService: FormService) {}

  ngOnInit(): void {
    this.getAccountTypes();
  }

  public getAccountTypes() {
    this.formService.getAccountTypes().subscribe((response) => {
      this.accountTypes = response;
    });
  }

  public sendFormData() {
    console.log(this.form);
  }
}

The form's template:

<h1>Get in touch</h1>

<form [formGroup]="form">
    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label >Fast name:</mat-label>
      <input  matInput formControlName="first_name" />
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label >Last name:</mat-label>
      <input  matInput formControlName="last_name" />
    </mat-form-field>

    <div formGroupName="accountInfo">
      <mat-radio-group
        formControlName="account_type"
        [(ngModel)]="this.selectedAccountType"
      >
        <mat-radio-button
          *ngFor="let accountType of accountTypes"
          [value]="accountType.value"
        >
          <span >{{ accountType.label }}</span>
        </mat-radio-button>
      </mat-radio-group>
    </div>

    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label >Email:</mat-label>
      <input  matInput formControlName="email" />
    </mat-form-field>
  </div>
  <div >
    <button
      (click)="sendFormData()"
      mat-raised-button
      color="primary"
      [disabled]="!form.valid"
    >
      Submit
    </button>
</form>

See this Stackblitz.

The problem

If the user forgets to select a radio button, there is no viable way, from a visual standpoint, to signal the <mat-radio-group> as invalid. I want the first option to be selected by default, instead.

I have not been able to achieve this goal.

What is the easiest and most reliable way to achieve the desired result?

CodePudding user response：

You can use the [checked] attribute on the radio button element to set the first option as selected by default.

For example,

<mat-radio-group>
  <mat-radio-button value="option1" checked>Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

CodePudding user response：

You can use ngModel

For example: *Html file:

<label id="example-radio-group-label">Pick your favorite season</label>
<mat-radio-group
  aria-labelledby="example-radio-group-label"
  
  [(ngModel)]="favoriteSeason">
  <mat-radio-button  *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

Ts file:

favoriteSeason: string;
  seasons: any[]=[];

After call api sessions:

favoriteSeason = sessions[0]

Ref link: https://material.angular.io/components/radio/examples

CodePudding user response：

The easiest way you can use is patchValue() for the formControl.

form.component.html

<mat-radio-group formControlName="account_type">
  <mat-radio-button
    *ngFor="let accountType of accountTypes"
    [value]="accountType.value"
  >
    <span >{{ accountType.label }}</span>
  </mat-radio-button>
</mat-radio-group>

If you use Reactive Form then there is no need to have ngModel for that, so I have removed it.

form.component.ts

public getAccountTypes() {
    this.formService.getAccountTypes().subscribe((response) => {
      this.accountTypes = response;
      this.form.patchValue({
        account_type: response[0].value, // use index as per your choice.
      });
    });
  }

To know more about Reactive forms and it's method please refer this link: Reactive Forms in Angular