Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在Angular中实现ControlValueAccessor时,为什么需要在writeValue中调用onChange和onTouch?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经实现了以下组件.它的工作和行为符合预期.然而,由于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 {}).

解决方法

阅读这篇文章,详细解释ControlValueAccessor:

> Never again be confused when implementing ControlValueAccessor in Angular forms

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

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

以下是我在上面引用的文章中的图片

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

formControl使用writeValue方法将值设置为本机表单控件. formControl使用registerOnChange方法注册每次更新本机表单控件时预期会触发的回调. registerOnTouched方法用于指示用户与控件交互.

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

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

大佬总结

以上是大佬教程为你收集整理的在Angular中实现ControlValueAccessor时,为什么需要在writeValue中调用onChange和onTouch?全部内容,希望文章能够帮你解决在Angular中实现ControlValueAccessor时,为什么需要在writeValue中调用onChange和onTouch?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: