Angular 4 Reactive Form - 显示值

Question

我正在使用反应式方法。我有一个具有相应 formControl 对象的输入字段，在键入时我正在对值进行格式化 - 将所有输入设为大写。

这当然很好用 - 值在视图和 formControl 中也会更新。

问题是我想向服务器发送原始值而不是格式化值（大写）

所以我需要类似值的东西，以及要在 formControl 对象中显示的值。

见 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

Angular 4 Reactive Form - 显示值

Angular 4 Reactive Form - Value for display

model-view-controller

model

reactive-programming

form-control

angular