Angular2- RC6 Custom Form Controls Not working
<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>