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.

app.component.ts
app.module.ts
main.ts
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);