Angular2 Reactive form.reset()不清除自定义组件

Question

在我的应用程序 Angular2RC5 中，我有一个 SSN 输入，其工作是在用户输入 SSN(例如 123-34-3434)时添加破折号。我将其用作“ react 形式”的一部分(那些不是模板形式的......)。我的模板如下所示:

<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 并且您需要将输入绑定(bind)到 this.value 以便它得到更新，这将显式跳过写入。

Plunker example