Angular2: Subscribe valuechanges in formbuilder

Question

I'm using ionic2 with angular2 and I have a form built with formbuilder but I want to detect new changes of a certain input.

ionViewDidLoad() {
  this.purchaseDataForm = this.formBuilder.group({
    kms: ['', Validators.required],
    lts: ['', Validators.required],
    price: ['', Validators.required],
    total: ['', Validators.required]
  });
}

So that's how my form is validated but I want to subscribe the valuechanges of the price and the lts inputs, do you know how to do that?

I'm trying with the following function but it displays Cannot read property 'valueChanges' of undefined

 ngOnInit() {
  this.purchaseDataForm.price.valueChanges.subscribe(value => {
    console.log(value);
  });
}

Thanks!

Solution 1

I don't know Ionic but I guess ionViewDidLoad() is called after ngOnInit(). Just move the code from ionViewDidLoad() to the constructor or to ngOnInit() before the current code.

You should be able to get the price control using

this.purchaseDataForm.get('price').valueChanges.subscribe(va‌​lue => {

Solution 2

The price is not a direct attribute of your form. The price is located in the "controls"-object of your form. So your code should look like this:

ngOnInit() {
    this.purchaseDataForm.controls.price.valueChanges.subscribe(value => {
        console.log(value);
    });
}

Comments

[SoldierCorp]

Moving the code to the constructor keeps the error but if I move the valuechanges code to the ionViewDidEnter() the error it's a bit different ionViewDidEnter error: Cannot read property 'valueChanges' of undefined but my function to detect the valuechanges is ok?

[Günter Zöchbauer]

Uh, I missed the price. Try this.purchaseDataForm.get('price').valueChanges.subscribe(va‌​lue => {

[SoldierCorp]

The right instruction is this.purchaseDataForm.controls['price'].valueChanges.sub‌​sc‌​ribe(value => { please update your answer so I can accept it, thanks!

[Günter Zöchbauer]

Did you try get()?. AFAIK it's the preferred way. It also allows you to get nested controls with .get('somegroup.subgroup.price')

[SoldierCorp]

Yes I tried and I got this this.purchaseDataForm.controls.get is not a function

[Günter Zöchbauer]

And without controls? I looked it up in the docs and from what I understand it should work without controls. Didn't remember exactly.

[SoldierCorp]

You right, it also works without controls, thanks! By the way, I have one more question about the formbuilder and how to disable and input, should I create a new question or you can help through the chat?

[SoldierCorp]

stackoverflow.com/questions/40792392/…