How to watch for form changes in Angular

by

UPD. The answer and demo are updated to align with latest Angular.

You can subscribe to entire form changes due to the fact that FormGroup representing a form provides valueChanges property which is an Observerable instance:

this.form.valueChanges.subscribe(data => console.log('Form changes', data));

In this case you would need to construct form manually using FormBuilder. Something like this:

export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

Check out valueChanges in action in this demo: http://plnkr.co/edit/xOz5xaQyMlRzSrgtt7Wn?p=preview

More Related Contents:

  1. How to detect a route change in Angular?
  2. Adding a HTTP header to the Angular HttpClient doesn’t send the header, why?
  3. Angular2 change detection: ngOnChanges not firing for nested object
  4. How to go back last page
  5. Angular 2 – innerHTML styling
  6. Angular2 multiple router-outlet in the same template
  7. Angular 2 change event on every keypress
  8. Set focus on element
  9. Angular2 – FormControl Validation on blur
  10. Get angular-cli to ng serve over HTTPS
  11. How to bind to data-* attribute in angular2? [duplicate]
  12. Angular 2: Iterate over reactive form controls
  13. Multiple canActivate guards all run when first fails
  14. Can’t reload/refresh active route
  15. Dynamic classname inside ngClass in angular 2
  16. Error trying to diff ‘[object Object]’ in Angular
  17. Error: supportsScrollBehavior is not declared configurable
  18. Differences between value and ngValue in Angular 5
  19. Best method to set different layout for different pages in angular 4
  20. Rxjs Retry with Delay function
  21. Docker container doesn’t reload Angular app
  22. NX MFE angular module federation not able to access remote micro front end
  23. How to access host component from directive?
  24. Property ‘toPromise’ does not exist on type ‘Observable’
  25. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  26. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  27. How do I get experimental ngTemplateOutlet to work?
  28. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Custom Exception Handler in Angular2

Leave a Comment