CODEWITHSUNDEEP
angularangular-reactive-formsangular-forms
Alexandr1919
Alexandr1919

Reputation: 55

formControl.value returns null although there is a "value" key in formControl object

I have a fairly complicated form with a plenty of controls in it, and i want to get value one of those inside formGroup.valueChanges subscription callback. (sample code below)

So i do a simple console.log(this.control) and it returns control which always definitely contains a "value" key with value in it, let's say "26".

However, when i try to get this value with console.log(this.control.value) in some occasions it returns null.

I tried to use setTimeOut and it works well, but it doesn't seem to me as a right way to fix the problem.

What's the secret of such behaviour?

this.someFormGroup.valueChanges
.pipe(first())
.subscribe(() => {
      
   console.log(this.control)
  // form control with value:'26' in it.
   console.log(this.control.value); // null
   setTimeout(() => {   // works well
      console.log(this.control)
  // form control with value:'26' in it.
      console.log(this.control.value)
 // '26;
   
});
})

Upvotes: 2

Views: 3849

Answers (1)

Adrian Sawicki
Adrian Sawicki

Reputation: 708

If you want to have access to "this.control.value" you should observe valueChanges of only this control or if you need the whole form context you should just observe changes instead of checking any control separately cause the value might not be bubbled to this control value as it is an async method.

this.someFormGroup.valueChanges.pipe(first()).subscribe(data =>          
   console.log(data)  // show whole formGroup data change
})

or

this.control.valueChanges.pipe(first()).subscribe(data =>          
   console.log(data)  // show control data change
})

Upvotes: 2

Related Questions