Angular FormControl valueChanges无法工作

Question

我想通过订阅来获取表单（“family”）的值，但似乎有些问题，因为我的控制台没有任何输出。

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));
  }
}

- M.J

---

为什么不在HTML的输入字段中使用change()事件处理程序？ - Abrar

Answer 1

在表单变量frm1上使用get方法。并且使用ngOnInit()替换ngAfterViewInit()

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

- Amit Chigadani

---

将代码放置在 ngOnInit() 中并尝试。没有必要在 ngAfterViewInit() 中执行。 - Amit Chigadani

谢谢，现在它可以工作了。我能知道为什么AfterViewInit出了问题吗？ - M.J

那是我建议的一种解决方法，没有必要在AfterViewInit中监视表单控件，因为您正在使用基于模型驱动的表单，并且已经有了所有表单控件名称。因此，理想的位置应该是onInit()。 - Amit Chigadani

我遇到了这个问题，因为我正在使用带有async管道的ngFor功能，所以它会自动订阅，一切都正常工作。 现在我正在使用另一个带有formControl的功能，但我忘记订阅了 :( 不过还是谢谢你的提示！ - Sampgun

更倾向于使用rxjs的其他特性（例如startWith和map），而不是使用subscribe：this.control.valueChanges.pipe(startWith(''), map(opt => this.isMatch(name))); - angellica.araujo

Answer 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)
             }
        )
      }
}

- Ketan Akbari

---

我已在我的项目中进行了测试：它可以正常工作。你遇到了什么错误？ - Ketan Akbari

你必须拥有表单初始化和设置函数。除此之外，你可以使用 .next() 方法来检测变化。 - Ketan Akbari

我认为：你需要在之后编辑表单，因此建议初始化表单并设置。 - Ketan Akbari

Answer 3

这个问题已经使用了 subscribe，但以防万一像我这样的人读完标题后来到这里。 valueChanges 对我也不起作用，但出现在其他地方。

我在我的项目中使用了 Material Stepper 和 Auto Complete。他们网站上的示例代码在 map 内筛选数据，但它没有起作用。

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)));

- Learning