tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
185 stars 114 forks source link

Component does not work with formControlName attribute #220

Open yuliankarapetkov opened 4 years ago

yuliankarapetkov commented 4 years ago

TypeScript:

form = this._formBuilder.group({
        range: [[0, 20]]
    });

Using [formControl] works fine:

<form [formGroup]="form">
    <nouislider [connect]="true" [min]="0" [max]="10" [step]="1" [formControl]="form.control.range"> 
    </nouislider>
</form>

But formControlName doesn't work:

<form [formGroup]="form">
    <nouislider [connect]="true" [min]="0" [max]="10" [step]="1" formControlName="range"> 
    </nouislider>
</form>

And causes the following exception:

ERROR Error: noUiSlider (14.0.3): 'start' is required.
asadmalik3 commented 4 years ago

For me it is not working with formControl nor with formControlName. Any update on this ticket?

riazXrazor commented 4 years ago

@yuliankarapetkov me too same error

anton-nikitsiuk commented 3 years ago

You have to specify start property in config like specified in error. My Example: <nouislider #slider [config]="sliderConfig" formControlName="myControlName" [(ngModel)]="rangeValues" (ngModelChange)="onChange($event)"></nouislider>

rangeValues:any = [];
sliderConfig: any = {
    orientation: "vertical",
    direction: "rtl",
    start: [1000, 4000],
    behaviour: 'drag',
    connect: true,
    keyboard: true,
    step: 50,
    pageSteps: 10,
    range: {
      min: 0,
      max: 5000
    },
    pips: {
      mode: 'count',
      density: 2,
      values: 6,
      stepped: true
    },
    tooltips: [true, true]
  };