title: Show validation error for Radio Boxes if there is none checked when clicking Submit in Angular
body: <p>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.</p>
  
  <pre><code>&lt;form name="form" #f="ngForm" (ngSubmit)="f.form.valid &amp;&amp; onSubmit()"&gt;
  &lt;div class="col-md-12"&gt;
    &lt;div class="form-group col-md-4"&gt;
      &lt;label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)"&gt;
        &lt;input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
               autocoplete="off" value="female" checked #selectedBy="ngModel" required&gt; Weiblich
      &lt;/label&gt;
      &lt;label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)"&gt;
        &lt;input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
               autocomplete="off" value="male" checked #selectedBy="ngModel" required&gt; Männlich
      &lt;/label&gt;
      &lt;div class="alert alert-warning" *ngIf="selectedBy.errors?.required &amp;&amp; (selectedBy.dirty || selectedBy.touched)"&gt;Die Angabe eines Geschlechts ist erforderlich.
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;button (click)="onSubmit()" type="submit" class="btn btn-primary"&gt;Weiter&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks for your help.</p>