Angular的ControlValueAccessor的WriteValue方法不触发ngModelChange事件。
创始人
2024-10-24 02:31:24
0

在Angular中,ControlValueAccessor接口用于创建自定义表单控件,并与ngModel指令进行交互。其中,WriteValue方法用于从父组件向自定义控件写入值。

如果在使用ControlValueAccessor时,写入值后ngModelChange事件没有被触发,可以尝试以下解决方法:

  1. 确保在自定义控件中正确实现ControlValueAccessor接口的方法。特别是在WriteValue方法中,要确保正确触发ngModelChange事件。以下是一个示例:
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `
    
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  value: any;
  onChange: any = () => {};

  writeValue(value: any): void {
    this.value = value;  // 写入值
    this.onChange(value); // 触发ngModelChange事件
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {}

  setDisabledState(isDisabled: boolean): void {}
}
  1. 确保在父组件中正确绑定ngModel和ngModelChange事件。确保使用了正确的双向绑定语法[(ngModel)],并且在ngModelChange事件处理器中做了相应的处理。以下是一个示例:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  customValue: any;

  onCustomValueChange(value: any): void {
    console.log('ngModelChange event triggered:', value);
  }
}

通过以上方法,当通过WriteValue方法写入值到自定义控件时,ngModelChange事件应该会被正确触发,并且在父组件中可以对事件进行处理。

相关内容

热门资讯

透视规律“大当家辅助脚本下载”... 透视规律“大当家辅助脚本下载”一向有辅助软件(发现有挂)您好:大当家辅助脚本下载这款游戏可以开挂,确...
专业讨论“黑侠破解约局吧”原先... 专业讨论“黑侠破解约局吧”原先有辅助平台(有挂方略)您好:黑侠破解约局吧这款游戏可以开挂,确实是有挂...
盘点几款“wepoker模拟器... 盘点几款“wepoker模拟器哪个”本然有辅助开挂下载(有挂细节)1、下载安装好wepoker模拟器...
透视肯定“吉祥填大坑游戏攻略”... 透视肯定“吉祥填大坑游戏攻略”原本有开挂辅助器(有挂总结);无需打开直接搜索加薇136704302(...
安装程序教程“小程序家乡大二辅... 安装程序教程“小程序家乡大二辅助工具”从来有辅助插件(详细教程);无需打开直接搜索打开薇:13670...
一起来讨论“八张透视辅助”原本... 大家好,今天小编来为大家解答八张透视辅助这个问题咨询软件客服可以免费测试直接加微信(13670430...
透视好友“莆田情怀脚本辅助器”... 透视好友“莆田情怀脚本辅助器”往昔有辅助工具(确实有挂);无需打开直接搜索打开薇:136704302...
教学盘点“浙江游戏温州熟客辅助... 教学盘点“浙江游戏温州熟客辅助”起初有开挂辅助插件(竟然有挂);亲,浙江游戏温州熟客辅助这款游戏原来...
透视脚本“游戏大厅辅助器”原生... 透视脚本“游戏大厅辅助器”原生有开挂辅助脚本(今日头条);无需打开直接搜索打开薇:136704302...
一分钟揭秘“汇友游戏辅助”本来... 【亲,汇友游戏辅助 这款游戏可以开挂的,确实是有挂的,很多玩家在这款汇友游戏辅助中打牌都会发现很多用...