Show validation error for Radio Boxes if there is none checked when clicking Submit in Angular

Question

In this example i want to get the Hint "Die Angabe eines Geschlechtes ist erforderlich" if the submit button is clicked and no gender is chosen. How can i reach this with the button? I thought i could change the 'touched' state of the radio buttons when the Submit Button is pressed, but this is just possible with reactive forms, is it? I am a bit confused about how to trigger the nfIf error to show the hint, when pressing the Submit button.

<form name="form" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()">
<div class="col-md-12">
  <div class="form-group col-md-4">
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
             autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
    </label>
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
             autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
    </label>
    <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && (selectedBy.dirty || selectedBy.touched)">Die Angabe eines Geschlechts ist erforderlich.
    </div>
  </div>

</div>
<button (click)="onSubmit()" type="submit" class="btn btn-primary">Weiter</button>

Thanks for your help.

Answer 1

I'm not super familiar with working with template driven forms and there is probably a better way to do this. I did put together a stackblitz that produces the result you're looking for.

Basically you are going to use @ViewChild() to grab the template form in the ts backing file. You'll have a boolean property to determine if the form has been submitted. You can then toggle that boolean and check for form validity in your onSubmit().

app.component.ts

export class AppComponent  {
  @ViewChild("f", { static: false })
  public form;

  public hasFormBeenSubmitted: boolean = false;
  public patient = {
    gender: ''
  }

  public onSubmit() {
    this.hasFormBeenSubmitted = true;

    // check for form validity
    if (this.form.invalid) {
      return;
    }

    console.log(this.patient);
  }
}

Then in your template you can just call onSubmit() when the form is submitted. You will check for the boolean value and the required error in your form control alert message with an *ngIf.

app.component.html

<form name="form" #f="ngForm" (ngSubmit)="onSubmit()">
  <div class="col-md-12">
    <div class="form-group col-md-4">
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
              autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
      </label>
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
              autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
      </label>
      <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && hasFormBeenSubmitted">Die Angabe eines Geschlechts ist erforderlich.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Weiter</button>
</form>

https://stackblitz.com/edit/angular-padcsk