Angular reactive form in Angular Range Slider component

26 Feb 20267 minutes to read

Implement Range Slider validation within Angular Reactive forms to enforce validation rules and provide real-time feedback. The following sample demonstrates slider state tracking using Angular form validation classes.

Follow the steps below to integrate and validate a slider within a reactive form.

• 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

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

  }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.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));