自定义表单控件中的角度字段延迟更新答案

【问题标题】：angular field in custom form control getting delayed updates自定义表单控件中的角度字段延迟更新
【发布时间】：2020-01-28 06:28:04
【问题描述】：

我在 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) {
  }
}

当我更改模型时，我可以看到通过 console.log 使用新值调用 writeValue，但内部控件没有更新。当我再次设置该值时，将绘制先前的值。如果我在表单中使用普通字段而不是自定义控件，它不会这样做。

提前致谢！

【问题讨论】：

听起来像是变化检测问题，这对于角度形式很常见，在这种情况下，您通常会觉得您正在与单向数据流作斗争。你能把它放在堆栈闪电战中吗？

标签： angular angular-reactive-forms

【解决方案1】：

在最后一个位置调用handleFieldChange函数

使用这段代码

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

而不是

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

【讨论】：