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事件应该会被正确触发,并且在父组件中可以对事件进行处理。

相关内容

热门资讯

黑科技脚本!wepoke辅助是... 黑科技脚本!wepoke辅助是真的(ai辅助)其实有挂(有挂轻量版)-哔哩哔哩关于wepoke辅助是...
黑科技智能ai!wepoke辅... 黑科技智能ai!wepoke辅助真的假的(透视)一贯有挂(有挂ai代打)-哔哩哔哩是由北京得wepo...
黑科技科技!红龙扑克app辅助... 黑科技科技!红龙扑克app辅助器(黑科技ai)真是是有挂(有挂长期)-哔哩哔哩;红龙扑克app辅助器...
黑科技透明挂!微扑克发牌为什么... 黑科技透明挂!微扑克发牌为什么这么离谱(辅助挂)都是存在有挂(有挂稳赢)-哔哩哔哩;致您一封信;亲爱...
黑科技中牌率!Wepoke透明... 黑科技中牌率!Wepoke透明挂(透视)原先存在有挂(有挂模拟器)-哔哩哔哩;支持2-10人实时对战...
黑科技新版!德扑之星攻略(黑科... 黑科技新版!德扑之星攻略(黑科技ai)原来真的是有挂(有挂app)-哔哩哔哩1、许多玩家不知道德扑之...
黑科技线上!wepoke游戏数... 1、黑科技线上!wepoke游戏数据有说法吗(黑科技ai)确实存在有挂(有挂透明挂)-哔哩哔哩。2、...
黑科技线上!德扑之星安卓模拟器... 黑科技线上!德扑之星安卓模拟器(ai代打)本来是真的有挂(有挂自建房)-哔哩哔哩;最新版2024是一...
辅助黑科技!wepoke智能a... 辅助黑科技!wepoke智能ai(黑科技ai)一贯是真的有挂(有挂脚本)-哔哩哔哩1、不需要AI权限...
黑科技ai!wpk胜率跟号有关... 1、黑科技ai!wpk胜率跟号有关么(黑科技ai)总是有挂(有挂稳赢)-哔哩哔哩。2、wpk胜率跟号...