how to synchronize slide value into an input field in reactive form

Question

I have now a problem and I don't know, how to synchronize the slide value into an input field in reactive form.

I show my code:

<div fxLayout="row">
    <mat-slider class="slider" color="primary" max="1" min="0" step="0.1" thumb-label="true"
                [(ngModel)]="dataService.adress"
                [disabled]="!dsearchDataService.sendAdress"
    ></mat-slider>
    <form [formGroup]="addressForm">
      <mat-form-field class="input">
        <input matInput type="number" step="0.1" max="1" min="0" maxlength="3"
               [(ngModel)]="dataService.address"
               formControlName="address">
        <mat-error *ngIf="address.invalid">Ivalid Value</mat-error>
      </mat-form-field>
    </form>
  </div>

now you see, in this reactive form before changing the code, I used ngModel to bind two values between slide and input field.

but in reactive form, ngModel should be removed instead formControlName.

in ts file:

public ngOnInit(): void{
    this.addressForm = this.fb.group({
      address: new FormControl({value: this.dataService.address, disabled: !this.dataService.sendAddress}, [Validators.pattern('/^[0-9]*$/'])
    });
  }

my problem is, now I want to synchronize the slide value into input field, if slide value changed.

any solutions??

Answer 1

I solved this as follows:

In my case I'm using Reactive Forms.

In *.html file:

<mat-form-field>
  <input
    matInput
    type="text"
    formControlName="field_name">
</mat-form-field>

...

<mat-slider
  class="slider"
  [max]="slider.max"
  [min]="slider.min"
  [step]="slider.step"
  [thumbLabel]="slider.thumbLabel"
  [color]="slider.color"
  [value]="slider_value"
  (change)="onSliderChange($event,'slider_name')"
  (input)="onSliderChange($event,'slider_name')">
</mat-slider>

In *.ts file:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

...

@Component({
  selector: 'app-something-create',
  templateUrl: './something-create.component.html',
  styleUrls: ['./something-create.component.css']
})
export class SomethingCreateComponent implements OnInit, OnDestroy {

form: FormGroup;

slider: MySlider = new MySlider();
slider_value: number;

  ngOnInit(): void {
    this.form = new FormGroup({'field_name': new FormControl({value: this.slider_value}, {})}
  }

...

  /**
   * @brief On Slider Change update the value in the Measurement and in the form to be displayed
   */
  onSliderChange($event, value_: string){
    /* You can extend this switch to use more than one slider, giving them different names */
    switch(value_){
      case 'slider_name':
        this.slider_value = $event.value;
        this.form.get('field_name').setValue(this.slider_value);
        break;
    }
  }

  ngOnDestroy(): void {
  }
}

/*
* @brief General class to initialize sliders
*/
class Slider {
  max: number;
  min: number;
  step: number;
  thumbLabel: boolean;
  color: string;
}

/*
* @brief Custom initialized slider
*/
class MySlider extends Slider {
  max = 10;
  min = 1;
  step = 0.1;
  thumbLabel = false;
  color="primary";
}

Let me know if this works for you. Happy coding!

Answer 2

You may use a directive (and decouple the synchronization logic aka Single Responsibility Principle):

import { Directive, OnInit, Optional } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[inputRef]',
})
export class InputRefDirective implements OnInit {
  constructor(@Optional() private ngControl: NgControl) {}

  ngOnInit(): void {
    this.ngControl?.valueChanges?.subscribe(value => this.ngControl?.control?.setValue(value, { emitEvent: false })
    )
  }
}

Then in your template:

<mat-slider [formControl]="control" min=0 max=100 inputRef></mat-slider>
<input [formControl]="control" type="number" />
<input [formControl]="control" type="number" />

And define a FormControl in the component:

import {Component} from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'slider-overview-example',
  templateUrl: 'slider-overview-example.html',
  styleUrls: ['slider-overview-example.css'],
})
export class SliderOverviewExample {
  control = new FormControl(1);

}

Stackblitz example.