Slider validation using template driven forms in Angular Range slider component
28 Sep 20235 minutes to read
Slider can be validated in Angular using Template-driven forms.
- The following CSS classes will be added on Slider component based on the action done by user.
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',
template: `
<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 .
</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:
</div>
</div>
</form>
</div>`,
styleUrls:['./index.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
value?: number;
validated?: boolean;
@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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);