angular的formControl值变化不起作用([formControl].valueChanges)不起作用。
创始人
2024-10-24 03:31:32
0

在Angular中,使用FormControl对象来管理表单控件的值和状态。当使用[valueChanges]绑定来监听FormControl值的变化时,如果发现不起作用,可能是由于以下原因:

  1. 确保FormControl对象已正确创建并绑定到表单控件上:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    
  `
})
export class MyFormComponent implements OnInit {
  myControl: FormControl;

  ngOnInit() {
    this.myControl = new FormControl('');
  }
}
  1. 确保订阅[valueChanges]事件:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    
  `
})
export class MyFormComponent implements OnInit {
  myControl: FormControl;

  ngOnInit() {
    this.myControl = new FormControl('');

    this.myControl.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}
  1. 确保在组件的模板中使用了FormsModule或ReactiveFormsModule:
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [MyFormComponent]
})
export class MyFormModule { }

如果以上步骤都正确无误,但[valueChanges]仍然不起作用,可以尝试使用ChangeDetectorRef来手动触发变化检测:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    
  `
})
export class MyFormComponent implements OnInit {
  myControl: FormControl;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.myControl = new FormControl('');

    this.myControl.valueChanges.subscribe(value => {
      console.log(value);
      this.cdr.detectChanges(); // 手动触发变化检测
    });
  }
}

通过这些步骤,你应该能够解决FormControl的值变化不起作用的问题。

相关内容

热门资讯

必备辅助推荐!蜀渝牌血战到底辅... 必备辅助推荐!蜀渝牌血战到底辅助,纳祥游戏科技,详细技巧(今日头条)1、进入游戏-大厅左侧-新手福利...
揭秘几款!奇迹陕西麻将辅助器,... 揭秘几款!奇迹陕西麻将辅助器,天天开心王国辅助器,详细教程(发现有挂)1、游戏颠覆性的策略玩法,独创...
盘点一款!大唐撸麻雀作弊码,潮... 盘点一款!大唐撸麻雀作弊码,潮汕馆辅助,详细方法(的确有挂)1、大唐撸麻雀作弊码免费脚本咨询教程、大...
终于清楚!欢乐卡五星插件,微信... 终于清楚!欢乐卡五星插件,微信新版518互游辅助,详细工具(有挂解密)1、游戏颠覆性的策略玩法,独创...
分辨真假!518互游辅助器下载... 分辨真假!518互游辅助器下载,顺欣茶楼开挂,详细教程(有挂工具)1、518互游辅助器下载破解器简单...
最新技巧!雀友会广东潮汕苹果开... 您好,雀友会广东潮汕苹果开挂这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】...
一分钟秒懂!海米大厅辅助,瑞安... 一分钟秒懂!海米大厅辅助,瑞安玉海楼茶苑辅助器,详细挂(发现有挂)一、瑞安玉海楼茶苑辅助器游戏安装教...
总算了解!雀神广东定制插件辅助... 总算了解!雀神广东定制插件辅助,欢乐达人暗堡破解,详细技巧(有挂教程)1、雀神广东定制插件辅助有没有...
玩家交流!九哥玩挂,蜜瓜大厅小... 玩家交流!九哥玩挂,蜜瓜大厅小程序辅助,详细挂(有挂秘诀)1、下载好蜜瓜大厅小程序辅助正确养号方法之...
信息共享!爱玩联盟辅助软件视频... 信息共享!爱玩联盟辅助软件视频讲解,潮汕汇游戏辅助,详细神器(的确有挂)1、爱玩联盟辅助软件视频讲解...