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

user_11290566 0
Viewed 1343

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;
   
});
})
angular-reactive-forms angular-forms angular
1 Answers

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