title: Angular2- RC6 Custom Form Controls Not working
body: <p>I have updated my Angular2 RC5 application to RC6. I have developed some custom form controls based on <a href="http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html" rel="nofollow">this</a> tutorial from Thoughtram.</p>
  
  <p>Everything was working until RC5, however after update the validation is not working anymore after a bit of investigation I found that the control's value is not reflected in the associated model.</p>
  
  <p>You can find the original plunker from Thoughtram's tutorial <a href="https://plnkr.co/edit/bLXWXn" rel="nofollow">here</a>.</p>
  
  <p>To reproduce the issue update the version information in <code>systemjs.config.js</code> file from</p>
  
  <pre><code>var ngVer = '@2.0.0-rc.5'; 
  var routerVer = '@3.0.0-rc.1'; 
  var formsVer = '@0.3.0'; 
  var routerDeprecatedVer = '@2.0.0-rc.2'; 
  </code></pre>
  
  <p>to</p>
  
  <pre><code>var ngVer = '@2.0.0-rc.6'; 
  var routerVer = '@3.0.0-rc.2'; 
  var formsVer = '@2.0.0-rc.6';
  </code></pre>
  
  <p>After the version update you will see that the control value is not updated and due to this the validation does not work.</p>
  
  <p>However, if I update the angular version to <code>@2.0.0-rc.6</code> and keep the forms version intact i.e. <code>@0.3.0</code>, it works.</p>
  
  <p><strong>UPDATE 1:</strong> Code for the component is</p>
  
  <pre><code>import { Component, OnInit, forwardRef, Input, OnChanges } from '@angular/core';
  import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
  
  
  export function createCounterRangeValidator(maxValue, minValue) {
    return (c: FormControl) =&gt; {
      let err = {
        rangeError: {
          given: c.value,
          max: maxValue || 10,
          min: minValue || 0
        }
      };
  
    return (c.value &gt; +maxValue || c.value &lt; +minValue) ? err: null;
    }
  }
  
  @Component({
    selector: 'counter-input',
    template: `
      &lt;button (click)="increase()"&gt;+&lt;/button&gt; {{counterValue}} &lt;button (click)="decrease()"&gt;-&lt;/button&gt;
    `,
    providers: [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =&gt; CounterInputComponent), multi: true },
      { provide: NG_VALIDATORS, useExisting: forwardRef(() =&gt; CounterInputComponent), multi: true }
    ]
  })
  export class CounterInputComponent implements ControlValueAccessor, OnChanges {
  
    propagateChange:any = () =&gt; {};
    validateFn:any = () =&gt; {};
  
    @Input('counterValue') _counterValue = 0;
    @Input() counterRangeMax;
    @Input() counterRangeMin;
  
    get counterValue() {
      return this._counterValue;
    }
  
    set counterValue(val) {
      this._counterValue = val;
      this.propagateChange(val);
    }
  
    ngOnChanges(inputs) {
      if (inputs.counterRangeMax || inputs.counterRangeMin) {
        this.validateFn = createCounterRangeValidator(this.counterRangeMax, this.counterRangeMin);
      }
    }
  
    writeValue(value) {
      if (value) {
        this.counterValue = value;
      }
    }
  
    registerOnChange(fn) {
      this.propagateChange = fn;
    }
  
    registerOnTouched() {}
  
    increase() {
      this.counterValue++;
    }
  
    decrease() {
      this.counterValue--;
    }
  
    validate(c: FormControl) {
      return this.validateFn(c);
    }
  }
  </code></pre>
  
  <p>Main module looks like:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { AppComponent } from './app.component';
  import { CounterInputComponent } from './counter-input.component.ts';
  
  @NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent, CounterInputComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>and I am using the component in my app.component like</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormBuilder, FormGroup } from '@angular/forms';
  import { createCounterRangeValidator } from './counter-input.component';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;h2&gt;Inside Form&lt;/h2&gt;
      &lt;div&gt;
        &lt;label&gt;Change min value:&lt;/label&gt;
        &lt;input [(ngModel)]="minValue"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;Change max value:&lt;/label&gt;
        &lt;input [(ngModel)]="maxValue"&gt;
      &lt;/div&gt;
      &lt;form [formGroup]="form"&gt;
        &lt;p&gt;Control value: {{form.controls.counter.value}}&lt;/p&gt;
        &lt;p&gt;Min Value: {{minValue}}&lt;/p&gt;
        &lt;p&gt;Max Value: {{maxValue}}&lt;/p&gt;
        &lt;p&gt;Form Value:&lt;/p&gt;
        &lt;pre&gt;{{ form.value | json }}&lt;/pre&gt;
  
        &lt;counter-input
          formControlName="counter"
          [counterRangeMax]="maxValue"
          [counterRangeMin]="minValue"
          [counterValue]="50"
          &gt;&lt;/counter-input&gt;
      &lt;/form&gt;
  
      &lt;p *ngIf="!form.valid"&gt;Form is invalid!&lt;/p&gt;
  
  
      &lt;h2&gt;Standalone&lt;/h2&gt;
      &lt;counter-input
        counterMinValue="0"
        counterMaxValue="3"
        [counterValue]="counterValue"&gt;&lt;/counter-input&gt;
    `
  })
  export class AppComponent {
  
    form:FormGroup;
    counterValue = 3;
    minValue = 0;
    maxValue = 12;
  
    constructor(private fb: FormBuilder) {}
  
    ngOnInit() {
      this.form = this.fb.group({
        counter: this.counterValue
      });
    }
  
  }
  </code></pre>
  
  <p><strong>Update 2</strong>: I've reported this issue on Github <a href="https://github.com/angular/angular/issues/11479" rel="nofollow">here</a></p>