Angular2 Reactive form.reset（）不清除自定义组件

在我的应用程序Angular2RC5中，我有一个SSN输入，其作用是在用户键入SSN时添加破折号（ex 123-34-3434） . 我正在使用它作为“反应形式”的一部分（那些不是模板形式......） . 我的模板看起来像这样：

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="submit()">
  <div class="thumbnail">
    <p class="lead">Please enter your <span *ngIf="context==='fr-secondary'">Spouse's </span> Last Name, SSN, Tax Year, and Quarter</p>
    //other inputs
    <div class="form-group">
      <label class="col-sm-2" for="inputSSN">SSN</label>
      <div class="col-sm-4">
        <ssn-input formControlName="ssn"></ssn-input>
        <!--<span class="help-block error" *ngIf="form.controls['ssn'].errors && form.controls['ssn'].errors['required']">required</span>
        <span class="help-block error" *ngIf="form.controls['ssn'].errors && form.controls['ssn'].errors['patternError']">Invalid SSN</span>-->
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary pull-right">Next</button>
</form>

每当他们点击提交，我们保存数据，然后如果他们已经表明他们已经结婚，我们想要重置表格并为他们的配偶收集数据 .

因此，当我执行 this.form.reset() 时，除了SSN输入（自定义的）之外的所有输入都会重置，并且表单后端的SSN值会重置，但前一个值仍然可供用户看到（这意味着如果它们点击提交，它将作为空字符串提交，即使他们可以看到一个） .

我也尝试过做 this.form.controls['ssn'].setValue('') 并且做同样的事情 . 更改表单上的值，但该值仍显示在页面上 .

这是整个SSN组件：

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) => {
    let pattern = /\d{9}/;
    let err = {
      patternError: {
        pattern: /\d{3}-\d{2}-\d{4}/
      }
    };
  return (c.value && !c.value.match(pattern) && c.value.length > 0) ? err : null;
  };
}

@Component({
  selector: 'ssn-input',
  template: `
    <input type="text" (input)="updateValue($event)" class="form-control" />
  `,
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SSNInputComponent), multi: true },
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => SSNInputComponent), multi: true }
  ]
})
export class SSNInputComponent implements ControlValueAccessor, OnInit {

  value: string = '';
  propagateChange: any = () => {};
  validateFn: any = () => {};


  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 >= 4) ? ('-' + newValue.substr(3, 2) + ((newValue.length >= 6) ? '-' + newValue.substr(5, 4) : '')) : '');
    event.target.value = newValue;
    this.propagateChange(this.value);
  }


  validate(c: FormControl) {
    return this.validateFn(c);
  }
}

编辑：plunkr