We can validate the Slider component using our FormValidator
. The following steps walk-through
for slider validation.
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
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();
public onChanged(): void {
this.formObject.validate();
}
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;
}