subscribe to valueChanges from input FormControl in FormGroup

Question

In Angular 4, I\'m trying to subscribe to the valueChanges of a FormControl. Neither of the versions below is working. I\'m not seeing any errors. The form.value JSON is upd

Answer 1

You are missing some crucial things in your code. First of all, what you are trying to subscribe to, doesn't exist. You have not marked that field to be a formcontrol, so Angular doesn't know to subscribe to that. You need to mark formControlName="firstname" to let Angular know it's a form control.

Also you are missing marking your form as a form group, it should be:

Using ngModel in forms is discouraged, the ngModel directive isn't even included in ReactiveFormsModule. I have also noticed that it often causes issues when used together with reactive forms. You have the form controls there to replace the use of ngModel, so drop it and make use of the form controls, since they are already in place! :)

Then I would instead of using valueChanges just use some change event instead in the template, but it's up to you.

So, the build of the form should look like this:

this.myForm = this.formBuilder.group({
  firstname: [''],
  lastname: ['']
})
// I like to use variables
this.firstNameCtrl = this.myForm.get('firstname')

// as mentioned, like to use change event:
logValue(value) {
  console.log(value)
}    

The template would then look like this:

So as mentioned use the form controls. If you need an initial value, set them in the build of the form. You have all values in your form object and you can access the values if you wish.