时间戳

首页 > 解决方案 > Angular 自定义表单控件 - 获取默认值

angular - Angular 自定义表单控件 - 获取默认值

问题描述

我有一个自定义控件，它使用“ControlValueAccessor”-“registerOnChange”回调在表单控件的值发生变化时将值发送到父表单。这里没问题。

但我也想发送在 OnInit 期间为自定义控件设置的默认值。问题是“registerOnChange”回调仅在 OnInit 之后发生。

有办法吗？

标签： angular

解决方案

ngAfterViewInit()将在registerOnChange方法运行后调用。

您可以在此处以编程方式设置输入的值，但这不会调用已注册的onChange()方法（例如名称为 onChange）。您将需要显式调用它。现在问题来自“ExpressionChangedAfterItHasBeenCheckedError”。

问题是如果那里有与子控件的绑定，则检查也可能发生在父组件中。调用 adetectCahnges()只会检查当前组件及其子组件的变化。执行 amarkForCheck()将标记此及其祖先以检查下一次更改检测，但不会立即调用更改检测。如果没有任何帮助，setTimeout()肯定会。

你可以有类似的东西：

  ngAfterViewInit() {
    setTimeout(() => {
      this.value = "changed value";
      this.onChange(this.value)
    })
  }


<input 
  [value]="value"
  (input)="onChange($event.target.value)"
  (blur)="onTouched()"
  [disabled]="isDisabled"
  type="text">

在此处查看示例：https ://stackblitz.com/edit/controlvalueaccessorgeneric-srsut9?file=src/app/app.component.ts

但是，为什么你需要这样做？在初始化 Reactive 表单时，您始终可以提供初始表单控件值。

推荐阅读