Angular reactive form in Angular Range Slider component

10 Jan 20256 minutes to read

Slider validation can be achieved in Angular using Reactive forms. Here the sample shown slider validation state based on Angular form classes.

Follow below steps to validate slider within reactive forms.

Create simple Angular reactive form. And add simple slider component within form.

Create form group with slider.

 sliderForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.value = 30;
    this.sliderForm = fb.group({
    'slider': [0, Validators.min(10)]
  });
}

Show the validation message, based on validation classes which is added to slider. Refer below code snippet.

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.


<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div><br/>
<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. <br/>
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid"  type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: 
</div>

app.component.ts
styles.css
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
import { CommonModule } from '@angular/common';

@Component({
  imports: [
    SliderModule,CommonModule,
    FormsModule, ReactiveFormsModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `
    <div class="container">
      <form [formGroup]="sliderForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="slider">Slider</label>
          <ejs-slider formControlName="slider" id='sliderelement' [(ngModel)]="value" type="MinRange" 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>`,
})

export class AppComponent {
  value;
  slidervalue?: SliderComponent;
  validated = false;
  sliderForm: FormGroup;
  constructor(@Inject(FormBuilder) public fb: FormBuilder) {
    this.value = 30;
    this.sliderForm = this.fb.group({
      'slider': [0, Validators.min(10)]
    });
  }
  onSubmit() {
    if (this.sliderForm.valid) {
      this.validated = true;
      console.log('form submitted');
      console.log(this.sliderForm.value.slider);
    }

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