Slider can be validated in Angular using Template-driven forms.
Class if true | Class if false | state |
---|---|---|
ng-touched |
ng-untouched |
The control has been visited. |
ng-dirty |
ng-pristine |
The control’s value has changed. |
ng-valid |
ng-invalid |
The control’s value is valid. |
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import {NgForm} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
value; validated;
@ViewChild('sliderForm') form: NgForm;
onSubmit() {
this.validated = true;
console.log(this.form.valid)
}
ngOnInit() {
this.value =70;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderValidaton } from './sliderValidation';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule
],
declarations: [AppComponent, SliderValidaton],
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);
import { Directive } from '@angular/core';
import { NG_VALIDATORS, FormControl, Validator, ValidationErrors } from '@angular/forms';
@Directive({
selector: '[slider-validate]',
providers: [{ provide: NG_VALIDATORS, useExisting: SliderValidaton, multi: true }]
})
export class SliderValidaton implements Validator {
validate(c: FormControl): ValidationErrors {
const isValid = c.value > 10;
return isValid ? null : 'not valid';
}
}
<div class="container">
<form #sliderForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="slider">Slider</label>
<ejs-slider name = "slider" id='default' type="MinRange" slider-validate [(ngModel)] ='value' required></ejs-slider>
<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div>
<div *ngIf="sliderForm.valid">
Slider has <b><i>valid </i> </b> value {{value}}.
</div>
<br />
<div *ngIf="sliderForm.pristine">
Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user.
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div>
<br />
<div *ngIf="sliderForm.untouched">
Slider having state <b><i>untouched.</i></b> Slider has not visited by user.
</div>
<div *ngIf="sliderForm.touched">
Slider having state <b><i>touched.</i> </b> Slider has been visited by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid" type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: {{value}}
</div>
</div>
</form>
</div>
.ng-valid[required]{
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
.e-slider-container .e-slider
{
/* csslint ignore:start */
border-left-color: transparent !important;
/* csslint ignore:end */
}
.formresult{
padding-bottom: 10px;
padding-top: 10px;
background-color: blanchedalmond;
text-align: center;
}