FormGroup.valuesChanges с пользовательским вводом возвращает предыдущее значение

пример stackblitz

При использовании formGroup с пользовательским вводом наблюдаемый объект valueChanges срабатывает со старым значением каждый раз, когда пользователь вводит. Это происходит только с опцией updateOn: blur.

Ожидаемый результат должен иметь текущее значение.

Итак, у меня есть помощник AbstractControlValueAccessor:

export class AbstractInput implements ControlValueAccessor {
    @Input() value: any = '';
    public disabled: boolean;
    protected onTouchedFn = (any?: any) => { };
    protected onChangeFn = (any?: any) => { };

    constructor() {}

    // Called when patchValue or setValue is called on the form control
    // Allows Angular to update the model
    writeValue(value: any): void {
        this.value = value;
    }

    registerOnChange(fn: any): void {
        this.onChangeFn = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouchedFn = fn;
    }

    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }

}

У меня есть свой пользовательский ввод

@Component({
  selector: 'custom-input',
  template: `
        {{ value | json }}
    <input 
    #inp
    inputApp
    type="text"
    [value]="value"
    (input)="onChange(inp.value)"/>
  `,
  providers: [ 
    makeAccessorProvider(CustomInputComponent)
  ]
})
export class CustomInputComponent extends AbstractInput  {

  onChange(value: string) {
        this.onTouchedFn();
        this.writeValue(value);
        this.onChangeFn(value);
    }

    onTouched() {
        this.onTouchedFn();
    }
}

и у меня есть компонент, который использует пользовательский ввод и проверяет, когда изменяется значение formGroup. Однако значение в консоли всегда является предыдущим значением.

@Component({
  selector: 'my-app',
  template:`
    <form [formGroup]="group">
      <custom-input formControlName="name"></custom-input>
    </form>`
})
export class AppComponent implements OnInit {
  group: FormGroup;
  value: any;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.group = this.fb.group({
      name: ['initial value']
    }, { updateOn: 'blur' });
    this.group.valueChanges.subscribe(value => {
      console.log(this.group.value);
      this.value = this.group.value;
    });
  }
}