Validation on the RadioButton

[Paul Kocher]

Hi!

Is there any validation implemented in the RadioButton control?

The documentation doesn't mention anything yet I need to show e-error for example if nothing has been chosen.

I'm using reactive forms with

<ejs-radiobutton></ejs-radiobutton>

How can I achieve this?

Thanks in advance

Paul

[Silambarasan I]

Hi Paul, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement “To show an error message for EJ2 RadioButton in reactive forms” and we would like to let you know that it can be achievable by using our form validator as like in the following code example.  

 

Sample Link:  

https://stackblitz.com/edit/angular-cva9s5?file=src%2Fapp%2Fapp.component.ts 

 

HTML: 

    <form [formgroup]="radioForm" novalidate id="formId" (ngsubmit)="onSubmit()"> 

        <div class="row"> 

            <ejs-radiobutton formcontrolname="payment" label="Cash on Delivery" name="payment" value="cashondelivery"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton formcontrolname="payment" label="Other Wallets" name="payment" value="others"></ejs-radiobutton> 

        </div> 

        <div *ngif="payment.invalid" class="alert alert-danger"> 

            Select Any payment mode 

        </div> 

        <button id="submit" type="submit" [disabled]="!radioForm.valid">Submit</button> 

    </form> 

 

 

TS: 

//… 

import { FormValidators } from '@syncfusion/ej2-angular-inputs'; 

 

//… 

 

export class AppComponent implements OnInit { 

  radioForm: FormGroup; 

 

  @ViewChild('formElement') element: any; 

 

  constructor() { 

 

    this.radioForm = new FormGroup({ 

      'payment': new FormControl('', [FormValidators.required]) 

    }); 

 

  } 

  ngOnInit(): void {} 

 

  get payment() { return this.radioForm.get('payment'); } 

   

  onSubmit() { 

    let submit: HTMLButtonElement = <HTMLButtonElement>document.getElementById('submit'); 

    if (!submit.disabled) 

      alert("Success") 

  } 

} 

 

 

Also, please refer our help documentation and sample links. 

https://ej2.syncfusion.com/angular/documentation/form-validator/reactive-form-validation 

https://www.syncfusion.com/angular-ui-components/form-validation 

 

https://ej2.syncfusion.com/angular/demos/#/material/textboxes/reactive-forms 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Silambarasan