angular поле в пользовательском контроле формы, получающее отложенные обновления - PullRequest
Новая
       0

angular поле в пользовательском контроле формы, получающее отложенные обновления

0 голосов
/ 28 января 2020

У меня есть пользовательское поле ввода в Angular. Мой пользовательский элемент управления имеет @Input (), который связан со значением поля ввода. Когда я пытаюсь использовать его в форме, я вижу, что вызывается writeValue, но новое значение не отображается, пока я не вызову writeValue снова. Обычное поле ввода не делает этого. Любая идея, что я делаю не так?

мой элемент управления HTML (vdsfield.component. html): 

<input (input)="handleFieldChange($event)"
       [type]="inputType" [disabled]="disabled"
       [placeholder]="placeholder"
       [value]="value"/>
<span *ngIf="error" class="error-icon"><span>!</span></span>

Машинопись: 

import {Component, forwardRef, Input} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'vds-field',
  templateUrl: './vdsfield.component.html',
  styleUrls: ['./vdsfield.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => VDSFieldComponent),
      multi: true
    }
  ]
})
export class VDSFieldComponent implements ControlValueAccessor {

  @Input() placeholder: string;
  @Input() value: string;
  @Input() disabled: boolean;
  @Input() inputType = 'text';
  @Input() error = false;

  constructor() { }

  propagateChange = (_: any) => {};

  handleFieldChange(e) {
    this.value = e.target.value;
    console.log('field changed');
    this.propagateChange(this.value);
  }

  writeValue(obj: any): void {
    if (obj !== undefined) {
      this.value = obj;
      console.log('Writing value:' + obj);
    }
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched(fn) {
  }
}

Когда я меняю модель, я вижу, что writeValue вызывается с новым значением через console.log, но внутренний элемент управления не обновляется. Когда я снова устанавливаю значение, рисуется предыдущее значение. Если я использую обычное поле в форме вместо своего пользовательского элемента управления, он этого не делает.

Заранее спасибо!

...