Slider validation using template driven forms in Angular Range Slider component

10 Jan 20255 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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { NgForm } from '@angular/forms';

@Component({
  imports: [
    CommonModule,
    SliderModule,
    FormsModule
  ],
  standalone: true,
  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;
  }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

.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;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));