Is it possible to use it with Reactive Forms?

[wuilliam321]

Hi, i am trying to use it with reactive forms, but the initial value is not seted and we cannot update the value of the selectedSelectedAllocationIndex while move the spinner:

<div class="col-8" [formGroupName]="i">
    <ng5-slider [(value)]="allocation.get('selectedSelectedAllocationIndex').value"
                [manualRefresh]="manualRefresh"
                [options]="getSliderOptions(i)"></ng5-slider>
  </div>

It is better if i can simply add formControlName="selectedSelectedAllocationIndex", Like:

<div class="col-8" [formGroupName]="i">
    <ng5-slider formControlName="selectedSelectedAllocationIndex"
                [manualRefresh]="manualRefresh"
                [options]="getSliderOptions(i)"></ng5-slider>
  </div>

but it is not documented or not implemented. Any idea?

[piotrdz]

I'm not sure what you are trying to do in your example. The slider expects a single expression that binds to value. If that value is undefined, well, the slider won't work properly.

Could you post a full example of what you are trying to do?

[mariusl-a]

Was looking for this one!

We're using ReactiveForms everywhere in our application. Being able to use formControlName on ng5-slider component would be really helpful!

Example of a different component we've also been using (ui-switch)

<form [formGroup]="messageForm">
	<div class="form-group form-check">
		<ui-switch size="small" class="form-check-input mt-0" formControlName="PrivateMessage"></ui-switch>
		<label class="form-check-label ml-4">Send as Private</label>
	</div>
</form>

I assume it's because ui-switch implements ControlValueAccessor - Perhaps it would be possible to do the same for this component?

https://angular.io/guide/reactive-forms
https://github.com/webcat12345/ngx-ui-switch

Anyway; Thanks for an awesome slider! It looks great!

[piotrdz]

Thanks @mariusl-a. I haven't used Angular reactive forms all that much. I read up on how it works behind scenes, and indeed, implementing ControlValueAccessor was the key to solving this.

I added support for reactive forms in current master and it will be available in next release.

[mariusl-a]

Thanks @piotrdz ! 💯 👍

[piotrdz]

Released in v1.1.7. Closing.