각도 4 반응 형 - 디스플레이 값

Question

반응 형 접근법을 사용하고 있습니다. 나는 해당하는 formControl Object가있는 입력 필드를 가지고 있으며, 입력 중에는 값에 대해 서식을 지정하고 있습니다. 모든 입력을 대문자로 만듭니다.

물론 잘 작동합니다. 값은 뷰와 formControl에서도 업데이트됩니다.

문제는 내가 서버에 원래의 가치와하지를 보내 싶습니다이다

그래서 나는 formControl 객체의 표시 값과 같이, 가치를 필요로 (대문자)를 formmated 값.

참조 plunker - formatting value formControl

템플릿 :

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

모델 :

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

하는 데 도움이 아무것도 찾을 수 없습니다. 제안 사항을 보내 주시면 감사하겠습니다.

Answer 1

여기에 추가로 data-model-value HTML 요소 속성을 사용하여 모델 값을 저장하는 제 솔루션입니다.

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