Angular2 Reactive form.reset() not clearing custom component

Question

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:

<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>

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.

So when I do this.form.reset(), 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).

I've also tried doing this.form.controls['ssn'].setValue('') and it does the same thing. Changes the value on the form, but the value is still showing on the page.

Here's the whole SSN component:

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);
  }
}

EDIT: plunkr

After some discussion in the angular2 gitter, we've decided that unless we're missing something, it might be a bug within angular itself. as such, I filed a bug on github: github.com/angular/angular/issues/11073 — Alex Kibler
See also the explanation in github.com/angular/angular/issues/11073 (just for cross-reference) — Günter Zöchbauer
I see kara's explanation now, but the example she provided doesn't quite work for me. "Property 'nativeElement' does not exist on type 'HTMLElement" — Alex Kibler
Then it is already the nativeElement. Just remove .nativeElement there — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-08-25T13:43:59

You need to assign the value to the input if it is updated using writeValue.

This code

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

this explicitly skips writing if the value is null and you need to bind the input to this.value so it gets updated.

Plunker example

Angular2 Reactive form.reset() not clearing custom component

1 Answers