Question

在我的应用程序Angular2RC5中，我有一个SSN输入，其作用是在用户键入SSN时添加破折号（ex 123-34-3434）。我使用它作为“反应形式”的一部分＆＃34; （那些不是模板形式......）。我的模板如下所示：

<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

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

1 个答案: