Errors when using reactive and formControlName

[somada141]

Hi there,

I've set up a little example showcasing my issue under https://stackblitz.com/edit/angular-6hoyua (sorta like JSFiddle). The above can be edited.

What I'm trying to figure out is how to use the slider in the reactive approach while connecting it to the FormControl via the formControlName as opposed to [formControl].

Here's the code:

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { 
  FormsModule, 
  ReactiveFormsModule,
  FormGroup,
  FormControl,
} from '@angular/forms';

import { NouisliderModule } from 'ng2-nouislider';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule, 
    FormsModule, 
    NouisliderModule,
    ReactiveFormsModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {

}

app.component.ts:

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

import { 
  FormGroup,
  FormControl,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  someRange = [5, 10];

  form = new FormGroup({
    range: new FormControl([5, 10])
  });
}

app.component.html:

<p>Slider (TD):</p>
<div>
  <nouislider 
    [connect]="true" 
    [min]="0" 
    [max]="15" 
    [step]="1"
    [(ngModel)]="someRange"
  ></nouislider>
</div>
<div>
  <p>Slider (Reactive - `formControlName`):</p>
  <form [formGroup]="form">
    <div class="form-group">
      <nouislider 
        class="form-control"
        id="years"
        name="years"
        [connect]="true" 
        [min]="0" 
        [max]="15" 
        [step]="1"
        formControlName="range"
      ></nouislider>
    </div>
  </form>
</div>
<div>
  <p>Slider (Reactive  - `formControl`):</p>
  <form [formGroup]="form">
    <div class="form-group">
      <nouislider 
        class="form-control"
        id="years"
        name="years"
        [connect]="true" 
        [min]="0" 
        [max]="15" 
        [step]="1"
        [formControl]="form.controls.range"
      ></nouislider>
    </div>
  </form>
</div>

The result for which is:

As you can see the 1st and 3rd instance is working fine but the 2nd won't show. Now I saw some issues detailing similar problems but I couldn't figure out a solution to this. Is the 2nd approach not supported for some reason?

[venoby]

@somada141 Hi, do you have any updates?

[somada141]

@venoby no nothing but I've benched it for the time being and will revisit at some point.

[fpfcarvalho]

for the second slider you can use:

      <nouislider 
        class="form-control"
        id="years"
        name="years"
        [connect]="true" 
        [min]="0" 
        [max]="15" 
        [step]="1"
        [(ngModel)]="someRange"
        formControlName="range"
      ></nouislider>
    </div>

you can use ngModel and formControlName in the same element inside an Reactive Form

[e-mihaylin]

ngModel + formControlName helps, but soon will be removed:

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel