Form slider with FormValidator in Angular Range Slider component

03 Aug 2021 / 3 minutes to read

We can validate the Slider component using our FormValidator. The following steps walk-through for slider validation.

Render Slider component inside form.
Bind changed event in the Slider component to validate the slider value when the value changes.
Initialize and render FormValidator for the form using form ID.
Set required property in the FormValidator rules collection. Here, we set the min property of Slider which sets the minimum value in Slider component and it has hidden input since enable validateHidden property as true.

//slider element
<ejs-slider id='default'></ejs-slider>
// sets required property in the FormValidator rules collection
export class AppComponent {
@ViewChild('formId') element:any;
public formObject: FormValidator;
ngAfterViewInit() {
  let options: FormValidatorModel = {
    rules: {
      'default': {
        validateHidden: true,
        min: [6, "You must select value greater than 5"]
      }
    }
  };
  this.formObject = new FormValidator(this.element.nativeElement, options);
}
}

Form validation done by either ID or name value of Slider component. In above used ID of the slider for validate it.

Using Slider name: Render Slider with name attribute. In the below code snippet we have used name attribute value of ‘slider’ for form validation.

//slider element with name attribute
<ejs-slider id='default' name='slider'></ejs-slider>
// sets required property in the FormValidator rules collection
export class AppComponent {
@ViewChild('formId') element:any;
public formObject: FormValidator;
ngAfterViewInit() {
  let options: FormValidatorModel = {
    rules: {
      'slider': {
        validateHidden: true,
        min: [30, "You must select value greater than 30"]
      }
    }
  };
  this.formObject = new FormValidator(this.element.nativeElement, options);
}
}

Validate the form using validate method and it validates the Slider value with the defined rules collection and returns the result. If user selects the value less than the minimum value, form will not submit.

this.formObject.validate();

Slider validation can be done during value changes in slider. Refer to the below code snippet.

  public onChanged(): void {
  this.formObject.validate();
  }

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

import { Component,ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
encapsulation: ViewEncapsulation.None

})
export class AppComponent {
@ViewChild('formId') element:any;
@ViewChild('default') sliderObj: SliderComponent;
public formObject: FormValidator;
public ticks: Object = {
    placement: 'Before',
    largeStep: 20,
    smallStep: 5,
    showSmallTicks: true
};
ngAfterViewInit() {
  let options: FormValidatorModel = {
    rules: {
      'slider': {
        validateHidden: true,
        min: [30, "You must select value greater than 30"]
      }
    }
  };

  this.formObject = new FormValidator(this.element.nativeElement, options);
}

public btnClick(): void {
  if (this.sliderObj.value < 5) {
    alert("Please select value greater than 30");
  } else {
    alert("Submitted");
    this.element.nativeElement.submit();
  }
}
public onChanged(): void {
  this.formObject.validate();
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
	<div class="content-wrapper" style="margin-bottom: 25px">
		<div class="form-title">
			<span>Slider Form Validation</span>
		</div>
		<form #formId class="form-horizontal">
			<div class="form-group">
				<div class="e-float-input">
					<ejs-slider id='default' #default name='slider' [value]=20 (changed)='onChanged()'
						[ticks]='ticks'></ejs-slider>
				</div>
			</div>
        </form>
        <button ejs-button isPrimary="true" type="submit" id="submit_btn" (click)="btnClick($event)">Submit</button>
 	</div>
</div>

#submit_btn {
    float: left;
    margin: 10% 11% 0 40%;
}

.highcontrast form {
    background: #000000
}

/* csslint ignore:start */
.highcontrast label.e-custom-label,
.highcontrast label.e-float-text,
.highcontrast label.salary,
.highcontrast input::placeholder,
.highcontrast .e-float-input label.e-float-text {
    color: #fff !important;
    line-height: 2.3;
}
/* csslint ignore:end */

.e-error,
.e-float-text {
    font-weight: 500;
}

table,
td,
th {
    padding: 5px;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

form {
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px 0 #ccc;
    border-radius: 5px;
    background: #f9f9f9;
    padding: 23px;
    padding-bottom: 20px;
}

.form-title {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    color: black;
}
#container {
    width: 80%;
    margin: 0 auto;
}