angular - 为什么在 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 表单的一部分，通常需要在组件上实现 ControlValueAccessor 接口(interface)。

I commented out the second and third line of writeValue(...) methodand, as far I can tell, nothing broke.

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

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

writeValue 方法被 formControl 用来设置原生表单控件的值。 registerOnChange 方法被 formControl 用来注册一个回调，每次更新 native 表单控件时都会触发该回调。 registerOnTouched 方法用于指示用户与控件交互。

Why is it important to execute the call to onChange(...) andonTouch(...) in writeValue(...)? What will go wrong and under whatcircumstances can it be expected?

这是一种机制，您实现 ControlValueAccessor 的自定义控件会通知 Angular 的 FormControl 输入中的值已更改或用户与控件进行了交互。

...discovered that I couldn't tell anything going bananas when Iremoved setDisabledState(...)...Does it really need to be implemented?

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