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的值变化不起作用的问题。

相关内容

热门资讯

透视黑科技!poker wor... 透视黑科技!poker world辅助,拱趴大菠萝有什么挂,攻略教程(有挂工具)1、上手简单,内置详...
透视辅助!wpk控制牌是真的吗... 透视辅助!wpk控制牌是真的吗,wpk辅助插件,微扑克教程(果然真的有挂)一、wpk控制牌是真的吗软...
透视代打!epoker透视底牌... 透视代打!epoker透视底牌,智星菠萝有挂吗,详细教程(有挂教程)1、用户打开应用后不用登录就可以...
透视辅助!wpk辅助插件,购买... 透视辅助!wpk辅助插件,购买的wpk辅助在哪里下载,可靠教程(原来真的是有挂)1、操作简单,无需注...
透视游戏!pokemmo辅助器... 透视游戏!pokemmo辅助器手机版下载,红龙poker辅助,微扑克教程(有挂细节)运pokemmo...
辅助透视!wpk德州局透视,w... 辅助透视!wpk德州局透视,wpk透视辅助下载,曝光教程(一贯有挂)1、完成wpk透视辅助下载的残局...
透视好牌!红龙poker作弊指... 透视好牌!红龙poker作弊指令,sohoo poker辅助,新2025教程(有挂攻略)1、打开软件...
透视实锤!wpk软件是正规的吗... 透视实锤!wpk软件是正规的吗,wpk俱乐部怎么作弊,微扑克教程(竟然是真的有挂);暗藏猫腻,小编详...
透视透视!大菠萝手游辅助,拱趴... 透视透视!大菠萝手游辅助,拱趴大菠萝万能挂图解,可靠技巧(有挂工具);1、超多福利:超高返利,海量正...
透视私人局!wpk透视怎么安装... 透视私人局!wpk透视怎么安装,wpk软件是正规的吗,透明挂教程(其实是真的有挂)1、每一步都需要思...