Search results

Slider in Angular Reactive Form

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 {{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: {{value}}
</div>
Source
Preview
app.component.ts
app.module.ts
main.ts
template.html
index.css
import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'my-app',
    templateUrl: 'app/template.html',
    styleUrls:['index.css']
})

export class AppComponent {
  value; slidervalue; 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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule,
        FormsModule, ReactiveFormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<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 {{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: {{value}}
			</div>
		</div>

	</form>

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