Angular FormControl valueChanges 不起作用

Posted

技术标签:

【中文标题】Angular FormControl valueChanges 不起作用【英文标题】:Angular FormControl valueChanges doesn't work 【发布时间】:2017-11-20 00:11:39 【问题描述】:

如果通过订阅进行更改,我想获得我的表单(“家庭”)值之一,但似乎有问题,因为我的控制台日志上什么也没有。

import  Component , AfterViewInit  from '@angular/core';
import FormGroup,FormBuilder from '@angular/forms';
import Observable from 'rxjs/Rx';

@Component(
  selector: 'app-root',
  template: `<form [formGroup]="frm1">
<input type="text" formControlName="name" >
<input type="text" formControlName="family">
</form>
`,

)

export class AppComponent implements AfterViewInit
  frm1 : FormGroup;

  constructor( fb:FormBuilder)
    this.frm1 = fb.group(
      name : [],
      family: []
    );
  
  ngAfterViewInit()
    var search = this.frm1.controls.family;
    search.valueChanges.subscribe( x => console.log(x));
  

【问题讨论】:

为什么不在 html 的输入字段中使用 change() 事件处理程序? 【参考方案1】:

在表单变量frm1 上使用get 方法。并使用ngOnInit() 而不是ngAfterViewInit()

ngOnInit()   
   this.frm1.get('family').valueChanges.subscribe( x => console.log(x));

【讨论】:

将代码放入ngOnInit() 并尝试。没有理由在ngAfterViewInit()内做事 感谢它的工作,我可以知道为什么 AfterViewInit 有问题! 这是我建议的解决方法,没有理由在AfterViewInit 中观看表单控件,因为您正在处理模型驱动的表单并且您拥有所有表单控件名称。所以理想的地方是 onInit()。 我遇到了这个问题,因为我正在将此功能与带有异步管道的 ngFor 一起使用,因此它会自动订阅并且一切正常。现在我正在使用另一个带有 formControl 的控件,但我忘记订阅了 :( 感谢您的提示! 首选rxjs其他功能(例如startWithmap)而不是使用subscribethis.control.valueChanges.pipe(startWith(''), map(opt =&gt; this.isMatch(name)));【参考方案2】:

试试这个:

import  Component , AfterViewInit, OnInit  from '@angular/core';
import FormGroup,FormBuilder from '@angular/forms';
import Observable from 'rxjs/Rx';

@Component(
selector: 'app-root',
template: `<h1>Hello World!</h1>
        <form [formGroup]="frm1">
        <input type="text" formControlName="name" >
        <input type="text" formControlName="family">
        </form>`)

export class AppComponent implements AfterViewInit, OnInit 

frm1 : FormGroup;

constructor( private formBuilder: FormBuilder)

ngOnInit(): void 
    this.formInit();
    this.formSet();


formInit(): void 
    this.frm1 = this.formBuilder.group(
        name: [''],
        family['']
    )


formSet(): void 
    const editForm = 
        name: 'test-name',
        family: 'test familty',
    ;
    this.frm1.patchValue(editForm) 


ngAfterViewInit()  
this.frm1 .controls.family.valueChanges.subscribe(
       () => 
              console.log(this.frm1 .controls.family.value)
             
        )
      

【讨论】:

我已经在我的项目中测试过:它有效:你遇到了什么错误 你必须有表单初始化和设置的功能。除了这个。你可以使用 .next() 方法来检测变化 我想:你需要在之后编辑表单,这就是为什么建议表单初始化和设置【参考方案3】:

这个问题已经使用了订阅,但以防万一像我这样的人在阅读标题后登陆这里。 valueChanges 也不适用于我,但出于其他原因。

我正在为我的项目使用材料步进器和自动完成功能。他们网站上的示例代码过滤了地图中的数据,但它不起作用。

this.filteredOptions = this.myControl.valueChanges.pipe(startWith(''), map(value => this._filter(value)));

但是订阅valueChange 可以工作并过滤数据。

this.myControl.valueChanges.pipe(startWith('')).subscribe(value => this.filteredOptions = of(this._filter(value)));

【讨论】:

以上是关于Angular FormControl valueChanges 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

FormControl在Angular 2中返回空值

angular2 复选框表单控件

Angular2 formControl用于选择多个

Angular:从指令访问 FormControl

Angular 7 - 使用 FormControl 字段启用提交表单

从“@angular/forms”导入 FormControl,FormGroup; [复制]