We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation on the RadioButton

Thread ID:

Created:

Updated:

Platform:

Replies:

141231 Nov 30,2018 10:24 AM UTC Dec 3,2018 12:24 PM UTC Angular - EJ 2 1
loading
Tags: RadioButton
Paul Kocher
Asked On November 30, 2018 10:24 AM UTC

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 [Syncfusion]
Replied On December 3, 2018 12:24 PM UTC

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:  
 
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. 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Silambarasan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon