Formcontrol different value, stays unchanged after setting value via valueAccessor.writeValue()

Question

The problem is same as Formcontrol invalid state unchanged after setting value via valueAccessor.writeValue() . But isn't solved. You can reply on his post.

In my case it's lik. I have directive for phone number:

import { Directive, HostListener, ChangeDetectionStrategy } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[phonemask]'
})
export class PhoneDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event){
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event){
    this.onInputChange(event.target.value, true);
  }

  onInputChange(event, backspace){
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '$1-$2');
    } else if (newVal.length <= 9) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,3})/, '$1-$2-$3');
    } else {
      newVal = newVal.substring(0, 9);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,3})/, '$1-$2-$3');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
    console.log(newVal);
    console.log(this.ngControl.value)
  }
}

The problem is that in some cases console.log(newVal); console.log(this.ngControl.value) has different values.

For example

111-1
1111

111-111-111
111-111-1111

Does this answer your question? [Formcontrol invalid state unchanged after setting value via valueAccessor.writeValue()](https://stackoverflow.com/questions/56065072/formcontrol-invalid-state-unchanged-after-setting-value-via-valueaccessor-writev) — Tim Lepage, Sep 01 '20 at 13:36
@TimLepage like its said. I can set maxlength on input and its works fine. But i want to know in the future why does this happens. — KamilCz, Sep 01 '20 at 13:39
@Gilsdav im getting `RangeError: Maximum call stack size exceeded` — KamilCz, Sep 01 '20 at 19:28
https://stackoverflow.com/questions/63667435/angular-ngmodelchange-is-late-when-updating-ngmodel/63670081#63670081 ? — Eliseo, Sep 02 '20 at 06:21

score 1 · Accepted Answer · answered Sep 02 '20 at 05:43

Quoted from this answer:

Angular has default value accessors for certain elements, such as for input type='text', input type='checkbox' etc...

A ControlValueAccessor is the middleman between the VIEW layer and the MODEL layer. When a user types into an input, the VIEW notifies the ControlValueAccessor, which has the job to inform the MODEL.

For instance, when the input event occurs, the onChange method of the ControlValueAccessor will be called. Here's how onChange looks like for every ControlValueAccessor:

function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
  dir.valueAccessor!.registerOnChange((newValue: any) => {
    control._pendingValue = newValue;
    control._pendingChange = true;
    control._pendingDirty = true;

    if (control.updateOn === 'change') updateControl(control, dir);
  });
}

The magic happens in updateControl:

function updateControl(control: FormControl, dir: NgControl): void {
  if (control._pendingDirty) control.markAsDirty();
  control.setValue(control._pendingValue, {emitModelToViewChange: false});
 
  // !
  dir.viewToModelUpdate(control._pendingValue);
  control._pendingChange = false;
}

dir.viewToModelUpdate(control._pendingValue); is what invokes the ngModelChange event in the custom directive. What this means is that the model value is the value from the input(in lowercase). And because ControlValueAccessor.writeValue only writes the value to the VIEW, there will be a delay between the VIEW's value and the MODEL's value.

It's worth mentioning that FormControl.setValue(val) will write val to both layers, VIEW and MODEL, but if we were to used this, there would be an infinite loop, since setValue() internally calls viewToModelUpdate(because the MODEL has to be updated), and viewToModelUpdate calls setValue().

So, a possible solution would be to add this snippet to your directive:

ngOnInit () {
  const initialOnChange = (this.ngControl.valueAccessor as any).onChange;

  (this.ngControl.valueAccessor as any).onChange = (value) => initialOnChange(this.makeChangesToInput(value));
}

@HostListener('ngModelChange', ['$event'])
onModelChange(event){
  this.ngControl.valueAccessor.writeValue(this.makeChangesToInput(event, false));
}

@HostListener('keydown.backspace', ['$event'])
keydownBackspace(event){
  this.ngControl.control.setValue(this.makeChangesToInput(event, true));

  // if you want the `ngModelChange` handler from above to be called
  // this.ngControl.control.setValue(this.makeChangesToInput(event, true), { emitViewToModelChange: true }); 
}

makeChangesToInput(value, backspace){
  let newVal = event.replace(/\D/g, '');
  if (backspace && newVal.length <= 6) {
    newVal = newVal.substring(0, newVal.length - 1);
  }
  if (newVal.length === 0) {
    newVal = '';
  } else if (newVal.length <= 3) {
    newVal = newVal.replace(/^(\d{0,3})/, '$1');
  } else if (newVal.length <= 6) {
    newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '$1-$2');
  } else if (newVal.length <= 9) {
    newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,3})/, '$1-$2-$3');
  } else {
    newVal = newVal.substring(0, 9);
    newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,3})/, '$1-$2-$3');
  }

  return newVal;
}

The gist is that you should perform any changes on the input value at the VIEW layer, before sending the altered value to the ControlValueAccessor.

I think this is what i was looking for. I get this. – KamilCz Sep 02 '20 at 14:17 — KamilCz, Sep 02 '20 at 14:17

Formcontrol different value, stays unchanged after setting value via valueAccessor.writeValue()

1 Answers1