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

Question

在 Angular2RC5 我的应用程序中，我有一个 SSN 输入，其工作是在用户键入其 SSN 时添加破折号（例如 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

Answer 1

如果使用writeValue 更新输入，则需要将值分配给输入。

这段代码

  writeValue(value) {
    if (value) {
      this.value = value;
    }
  }

如果值为 null 并且您需要将输入绑定到 this.value 以便更新，则此显式跳过写入。

Plunker example