How to perform validation in radio button in angular 6?

Question

Actaully i have two types of input types: one is normal text and another is radio type.I want to valdiate both the fields before submit button is entered.

For this normal input field i made the validation but i have no idea how to do for the radio button.I want to validate if user doesnot select any radio button.

<form  name="form" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()" novalidate class="feedback-form">
         <div class="col-md-12">

            <div class="form-group col-md-4">
               <label for="selectionDate">Selection Date</label>
               <input type="text" 
               id="selectionDate"
               class="form-control"
                name="selectionDate"
                placeholder="Please enter the date" 
               [(ngModel)]="selection.selectionDate"
                #selectionDate="ngModel"
                [ngClass]="{ 'is-invalid': f.submitted && selectionDate.invalid }"
                 required
                  />

             <div *ngIf="f.submitted && selectionDate.invalid" class="invalid-input">
            <!-- individual validation errors -->
            <div *ngIf="selectionDate.errors?.required">DateField is required</div>
          </div>

            </div>
            <div class="form-group col-md-4">
               <label for="selectedBy">Selected By</label>
               <br>
               <label class="radio-inline">
               <input type="radio" name="selectedBy" 
               [(ngModel)]="selection.selectedBy" value="Department">Department
               </label>
               <label class="radio-inline">
               <input type="radio" name="selectedBy"  
               [(ngModel)]="selection.selectedBy" value="Office">Office
               </label>
            </div>
         </div>
</form>

Possible duplicate of [Angular 5 Reactive Forms - Radio Button Group](https://stackoverflow.com/questions/49078286/angular-5-reactive-forms-radio-button-group) — Roy, Nov 01 '18 at 07:31

score 6 · Accepted Answer · answered Nov 01 '18 at 07:38

It 's the same how you did validate the input element before

        <div class="form-group col-md-4">
           <label for="selectedBy">Selected By</label>
           <br>
           <label class="radio-inline">
           <input type="radio" name="selectedBy" 
           [(ngModel)]="selection.selectedBy" value="Department" required
                           #selectedBy="ngModel">Department
           </label>
           <label class="radio-inline">
           <input type="radio" name="selectedBy"  
           [(ngModel)]="selection.selectedBy" value="Office" required>Office
           </label>
        <div *ngIf="selectedBy.errors?.required">selectedBy is required</div>
      </div>

demo

bortkevb · Answer 2 · 2020-11-01T13:52:43.880

The radio button's name is submitted to the back end, and the id is used for front-end things like label association.

ids should always be unique, so do fix it otherwise it would not work.

Below is my solution for a similar situation. The thing to notice is the use of ?. operator for optional property accesses, otherwise you would get "Cannot read property 'required' of null"

        <div class="custom-control custom-radio">
          <input
            id="male"
            formControlName="gender"
            type="radio"
            class="custom-control-input"
            value="male"
            [ngClass]="{ 'is-invalid': submitted && f.gender.errors?.required}"
          />
          <label class="custom-control-label" for="male">Male</label>
        </div>
        <div class="custom-control custom-radio">
          <input
            id="female"
            formControlName="gender"
            type="radio"
            class="custom-control-input"
            value="female"
            [ngClass]="{ 'is-invalid': submitted && f.gender.errors?.required}"
          />

Don't you think your answer won't help OP? I think question was about form validation. — Michał Tkaczyk, Oct 30 '20 at 15:07
Well.. with the same id the radio button will not work as expected. I however agree that I should have present my solution. Fixing this now. Thanks — bortkevb, Nov 01 '20 at 13:55

How to perform validation in radio button in angular 6?

2 Answers2