title: Angular2 Reactive form.reset() not clearing custom component
body: <p>In Angular2RC5 my application, I have an SSN input whose job is to add dashes as the user types in their SSN (ex 123-34-3434).  I'm using this as part of a "reactive form" (the ones that aren't template forms...).  My template looks like this:</p>
  
  <pre><code>&lt;form class="form-horizontal" [formGroup]="form" (ngSubmit)="submit()"&gt;
    &lt;div class="thumbnail"&gt;
      &lt;p class="lead"&gt;Please enter your &lt;span *ngIf="context==='fr-secondary'"&gt;Spouse's &lt;/span&gt; Last Name, SSN, Tax Year, and Quarter&lt;/p&gt;
      //other inputs
      &lt;div class="form-group"&gt;
        &lt;label class="col-sm-2" for="inputSSN"&gt;SSN&lt;/label&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;ssn-input formControlName="ssn"&gt;&lt;/ssn-input&gt;
          &lt;!--&lt;span class="help-block error" *ngIf="form.controls['ssn'].errors &amp;&amp; form.controls['ssn'].errors['required']"&gt;required&lt;/span&gt;
          &lt;span class="help-block error" *ngIf="form.controls['ssn'].errors &amp;&amp; form.controls['ssn'].errors['patternError']"&gt;Invalid SSN&lt;/span&gt;--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary pull-right"&gt;Next&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Whenever they click submit, we save the data, and then if they've indicated that they're married, we want to reset the form and collect the data for their spouse.</p>
  
  <p>So when I do <code>this.form.reset()</code>, all of the inputs except the SSN input (the custom one) reset, and the value of the SSN on the backend of the form resets, but the previous value is still visible to the user (which means if they click submit, it'll submit as an empty string, even if they can see one).</p>
  
  <p>I've also tried doing <code>this.form.controls['ssn'].setValue('')</code> and it does the same thing.  Changes the value on the form, but the value is still showing on the page.</p>
  
  <p>Here's the whole SSN component:</p>
  
  <pre><code>import { Component, OnInit, forwardRef, Input } from '@angular/core';
  import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
  
  
  export function createSSNPatternValidator() {
    return (c: FormControl) =&gt; {
      let pattern = /\d{9}/;
      let err = {
        patternError: {
          pattern: /\d{3}-\d{2}-\d{4}/
        }
      };
    return (c.value &amp;&amp; !c.value.match(pattern) &amp;&amp; c.value.length &gt; 0) ? err : null;
    };
  }
  
  @Component({
    selector: 'ssn-input',
    template: `
      &lt;input type="text" (input)="updateValue($event)" class="form-control" /&gt;
    `,
    providers: [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =&gt; SSNInputComponent), multi: true },
      { provide: NG_VALIDATORS, useExisting: forwardRef(() =&gt; SSNInputComponent), multi: true }
    ]
  })
  export class SSNInputComponent implements ControlValueAccessor, OnInit {
  
    value: string = '';
    propagateChange: any = () =&gt; {};
    validateFn: any = () =&gt; {};
  
  
    ngOnInit() {
      this.validateFn = createSSNPatternValidator();
    }
  
    writeValue(value) {
      if (value) {
        this.value = value;
      }
    }
  
    registerOnChange(fn) {
      this.propagateChange = fn;
    }
  
    registerOnTouched() {}
  
    updateValue(event) {
      let newValue = event.target.value;
      newValue = newValue.replace(/\D/g, '').substr(0, 9);
      this.value = newValue;
      newValue =
        newValue.substr(0, 3) + ((newValue.length &gt;= 4) ? ('-' + newValue.substr(3, 2) + ((newValue.length &gt;= 6) ? '-' + newValue.substr(5, 4) : '')) : '');
      event.target.value = newValue;
      this.propagateChange(this.value);
    }
  
  
    validate(c: FormControl) {
      return this.validateFn(c);
    }
  }
  </code></pre>
  
  <p>EDIT:  <a href="https://plnkr.co/edit/0iVxcXSV5ljm5o7c86DE?p=preview" rel="nofollow">plunkr</a></p>