Angular2 Reactive form.reset() nicht benutzerdefinierte Komponente löschen

Question

In Angular2RC5 meiner Anwendung habe ich eine SSN-Eingabe, deren Aufgabe ist, Striche wie der Benutzer schreibt in ihrer SSN (ex 123-34-3434) hinzuzufügen. Ich benutze das als Teil einer "reaktiven Form" (diejenigen, die keine Template-Formen sind ...). Meine Vorlage sieht wie folgt aus:

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

Jedes Mal, wenn sie einreichen klicken, wir die Daten zu speichern, und dann, wenn sie angegeben haben, dass sie verheiratet sind, wollen wir die Form und sammeln die Daten für ihre Ehepartner setzen.

Wenn ich also this.form.reset() mache, werden alle Eingaben mit Ausnahme der SSN-Eingabe (der benutzerdefinierten) zurückgesetzt, und der Wert der SSN auf dem Back-End des Formulars wird zurückgesetzt, aber der vorherige Wert ist weiterhin für den Benutzer sichtbar (Das bedeutet, wenn sie auf submit klicken, wird sie als leere Zeichenfolge übergeben, auch wenn sie eine sehen können.

Ich habe auch versucht this.form.controls['ssn'].setValue('') getan und es tut das gleiche. Ändert den Wert des Formulars, aber der Wert wird weiterhin auf der Seite angezeigt.

Hier ist die ganze SSN-Komponente:

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

Answer 1

Sie müssen den Wert an den Eingang vergeben, wenn es writeValue aktualisiert verwendet.

Dieser Code

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

dies ausdrücklich schriftlich überspringt, wenn der Wert null ist, und Sie müssen die Eingabe zu this.value so wird sie aktualisiert binden.

Plunker example