Angular FormControl valueChanges doesn't work

Question

I want to get one of my forms ("family") value if changed by subscribing but it seems something is wrong because I got nothing on my console's log.

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

Why not use a change() event handler in your HTML's input fields ? — Abrar
– Abrar, Commented Jun 17, 2017 at 9:24

Amit Chigadani · Accepted Answer · 2018-05-24 11:38:15Z

16

Use get method on form variable frm1. And use ngOnInit() instead of ngAfterViewInit()

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

edited May 24, 2018 at 11:38

answered Jun 17, 2017 at 8:36

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Amit Chigadani Over a year ago

Place the code within ngOnInit() and try. There is no reason to do within ngAfterViewInit()

M.J Over a year ago

thanks now its working, may i know why AfterViewInit had problem!!

Amit Chigadani Over a year ago

That was a workaround that I suggested, there is no reason to watch form control inAfterViewInit, since you are working on model-driven forms and you have all the form control names in place. So ideal place would be onInit().

Sampgun Over a year ago

I came across this issue because I am using this feature with a ngFor with async pipe, so it automagically subscribes and everything works just fine. Now I am using another one with a formControl and I forgot to subscribe :( Thanks for the tip though!

angellica.araujo Over a year ago

Prefer rxjs other features (startWith and map for example) rather than using subscribe: this.control.valueChanges.pipe(startWith(''), map(opt => this.isMatch(name)));

Learning · Accepted Answer · 2021-08-18 12:06:07Z

4

The question already uses subscribe but just in case somebody like me lands here after reading the title. valueChanges was also not working for me but for some other reason.

I was using material stepper and auto complete for my project. The sample code on their website, filters the data within map but it did not work.

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

However subscribing to the valueChange worked and filtered the data.

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

answered Aug 18, 2021 at 12:06

Learning

1,4131 gold badge20 silver badges27 bronze badges

1 Comment

Mike Poole Over a year ago

There is another case where this is a better solution than Angular's suggested approach. I used it to filter multiple lists in a single subscribe using the same value.

Ketan Akbari · Accepted Answer · 2017-06-17 09:12:15Z

3

Try this:

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

edited Jun 17, 2017 at 9:12

answered Jun 17, 2017 at 8:40

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

3 Comments

Ketan Akbari Over a year ago

i have tested in my project: it works: what error you getting

Ketan Akbari Over a year ago

you have to have functions for form init and set. otherthan this. you can use .next() method to detect change

Ketan Akbari Over a year ago

i thought: you nedd to edit form after, thats why suggest form init and set

Collectives™ on Stack Overflow

Angular FormControl valueChanges doesn't work

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related