大佬教程收集整理的这篇文章主要介绍了在Angular中实现ControlValueAccessor时,为什么需要在writeValue中调用onChange和onTouch?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@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 {}).
> Never again be confused when implementing ControlValueAccessor in Angular forms
如果组件应该用作Angular表单的一部分,通常需要在组件上实现ControlValueAcceessor接口.
这可能是因为您没有应用任何表单指令 – formControl或ngModel将FormControl链接到您的自定义输入组件. FormControl使用InputComponent的writeValue方法进行通信.
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,请注明来意。