为什么在 Angular 中实现 ControlValueAccessor 时需要在 writeValue 中调用 onChange 和 onTouch？

Question

我已经实现了以下组件。它按预期工作和表现。尽管如此，由于ControlValueAccessor 的实现对我来说是新的，我不得不follow a blog 而不了解一些部分的更深层次的细节。所以这是一种“它有效但为什么？！”的情况。

@Component({ selector: ..., templateUrl: ..., styleUrls: ...,
  providers: [{ provide: NG_VALUE_ACCESSOR, 
                useExisting: forwardRef(() => InputTextComponent), 
                multi: true }]
})
export class InputComponent implements ControlValueAccessor {

  constructor() { }
  @Input() info: string;
  onChange: any = () => { }
  onTouch: any = () => { }

  writeValue(input: any): void {
    this.info.value = input;
    // this.onChange(input);
    // this.onTouch();
  }

  registerOnChange(_: any): void { this.onChange = _; }
  registerOnTouched(_: any): void { this.onTouch = _; }

  setDisabledState?(state: boolean): void { }

  onEdit(value: string): void { this.onChange(value); }
}

当我让它工作时，我注释掉了writeValue(...) 方法的第二行和第三行，据我所知，没有任何问题。 other blogs 也一直建议这些调用，所以我相信忽略它们是不合适的。不过，我不相信魔法，更喜欢有具体的做事理由。

为什么在writeValue(...) 中执行对onChange(...) 和onTouch(...) 的调用很重要？会出现什么问题以及在什么情况下会出现问题？

作为一个支线任务，我还尝试注释掉 the other methods 并发现当我删除 setDisabledState(...) 时我无法说出任何事情。什么时候可以预期会引起问题？它真的需要实现吗（我见过括号前后都有问号的版本，参数如下：setDisabledState?(state: boolean): void { }，但也像这样：setDisabledState(state: boolean)?: void { }）。

Answer 1

阅读这篇文章，详细解释ControlValueAccessor：

• Never again be confused when implementing ControlValueAccessor in Angular forms

如果组件应该用作 Angular 表单的一部分，您通常需要在组件上实现 ControlValueAcceessor 接口。

我注释掉了 writeValue(...) 方法的第二行和第三行 而且，据我所知，没有任何损坏。

这可能是因为您没有应用任何表单指令 - formControl 或 ngModel 将 FormControl 链接到您的自定义输入组件。 FormControl使用InputComponent的writeValue方法进行通信。

这是我上面引用的文章中的图片：

formControl 使用writeValue 方法为原生表单控件设置值。 registerOnChange 方法由formControl 使用来注册一个回调，该回调预计将在每次更新本机表单控件时触发。 registerOnTouched 方法用于指示用户与控件交互。

为什么执行对 onChange(...) 的调用很重要？ 在 writeValue(...) 中的 onTouch(...)？什么会出错，在什么情况下 情况可以预期吗？

这是实现 ControlValueAcceessor 的自定义控件通知 Angular 的 FormControl 输入中的值已更改或用户与控件交互的机制。

...发现我什么都说不出来 去掉了 setDisabledState(...)...真的需要实现吗？

正如接口中指定的，当控件状态更改为“禁用”或从“禁用”更改时，表单 API 调用此函数。根据值，它应该启用或禁用适当的 DOM 元素。 如果您想在关联的FormControl 的状态变为disabled 时收到通知，则需要实现它，然后您可以执行一些自定义逻辑（例如，禁用您的输入组件）。

Answer 2

我不认为接受的答案以简洁的方式回答了最核心的问题：

为什么在 writeValue(...) 中调用 onChange(...) 和 onTouch(...) 很重要？

不是。您确实不需要在 writeValue 中调用 onChange。这不是预期用途（请参阅下面的文档链接）。

会出现什么问题以及在什么情况下会出现这种情况？

预计不会出错。详细回答：

如果您要从writeValue 内部调用onChange，您会注意到：

• 第一次 onChange 调用什么也不做。这是因为第一次调用 writeValue 时，onChange 回调尚未注册（即registerOnChange 未调用）。
• 稍后从 writeValue 内部调用 onChange 会使用您从模型中获得的值更新您的模型（使用 emitModelToViewChange = false 以避免递归调用 writeValue）。

换句话说，除非您依赖您的组件以某种方式立即更改它在 writeValue 中接收到的值，并将这些更改传递回您的模型，但仅在 second 以及稍后调用 writeValue，您可以安全地不从 writeValue 调用 onChange。

在此处查看文档中的示例：https://angular.io/api/forms/ControlValueAccessor