Component does not work with formControlName attribute

[yuliankarapetkov]

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]

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

[riazXrazor]

@yuliankarapetkov me too same error

[anton-nikitsiuk]

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