Angular 4 Reactive Form - Wert für die Anzeige

Question

Ich verwende einen reaktiven Formansatz. Ich habe Eingabefeld, das correspondent formControl-Objekt und während der Eingabe mache ich Formatierung auf den Wert - machen alle Eingabe Großbuchstaben.

Das funktioniert natürlich gut - der Wert wird in der Ansicht und auch in formControl aktualisiert.

Das Problem ist, dass ich möchte den ursprünglichen Wert an den Server senden und nicht der formmated Wert (Groß-)

Also brauche ich so etwas wie Wert und Wert für die Anzeige im Formcontrol-Objekt.

See Plunker - formatting value formControl

Vorlage:

<input type="text" 
     class="form-control" 
     (blur)="handleOnBlur($event)" 
     (input)="onChange($event)" 
     formControlName="name"> 

Modell:

valueForModel: string; 
    valueForDisplay: string; 
    public myForm: FormGroup;   

onChange(event) { 
    const value = event.target.value; 
    this.valueForModel = value; 
    this.valueForDisplay = value.toUpperCase(); 

    event.target.value = this.valueForDisplay; 
} 

handleOnBlur(event) { 

    consol.log(this.valueForModel); 
    // Herer I'm calling the sever and the server actually works good 
    // server return back the updated value - but it then override my value 
     in the dom 
    // the value for display value  
    } 

ngOnInit() { 

    this.myForm = this._fb.group({ 
     name: ['', [<any>Validators.required, 
      <any>Validators.minLength(5)]], 
     }); 
    } 

Kann nichts finden zu helfen. Jeder Vorschlag wird geschätzt.

Answer 1

Hier ist meine Lösung, die zusätzliche data-model-value HTML-Element-Attribut verwendet, um Modellwert zu speichern.

HTML:

<form [formGroup]="myForm"> 
    <input formControlName="myInput" #inputRef > 
</form> 

TS:

.... 
@ViewChild('inputRef') inputRef; 
.... 

ngOnInit() { 
    this.myForm = this._fb.group({ 
    myInput: ['', [Validators.required]] 
    }); 

    // listen to input changes 
    this.myForm.get('myInput').valueChanges.subscribe(val => { 
    const elRef = this.inputRef.nativeElement; 
    // get stored original unmodified value (not including last change) 
    const orVal = elRef.getAttribute('data-model-value') || ''; 
    // modify new value to be equal to the original input (including last change) 
    val = val.replace(orVal.toUpperCase(), orVal); 
    // store original unmodified value (including last change) 
    elRef.setAttribute('data-model-value', val); 
    // set view value using DOM value property 
    elRef.value = val.toUpperCase(); 
    // update model without emitting event and without changing view model 
    this.myForm.get('myInput').setValue(val, { 
     emitEvent: false, 
     emitModelToViewChange: false 
    }); 
    }); 
} 

STACKBLITZ: https://stackblitz.com/edit/uppercase-reactive-pipe?file=app%2Fapp.component.ts