Angular FormControl valueChanges 不起作用

Posted 2023-03-13

【中文标题】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其他功能（例如startWith和map）而不是使用subscribe：this.control.valueChanges.pipe(startWith(''), map(opt => 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)));