Correct way of subscribing to valueChanges in Angular 2

Question

I have been fiddling around with reactive forms and valueChanges subscription in Angular 2. I don;t quite get why certain form of subscribing seem not to be allowed.

this.form.get('name').valueChanges /* <- doesn't work */
  .do(changes => {
    console.log('name has changed:', changes)
    });
  .subscribe();

this.form.get('title').valueChanges.subscribe( /* <- does work */
  changes => console.log('title has changed:', changes)
);

This plunker reproduces the problem (open DevTools console to see the error):

ZoneAwareError {stack: "Error: Uncaught (in promise): TypeError: Cannot se…g.com/[email protected]/dist/zone.js:349:25) []", message: "Uncaught (in promise): TypeError: Cannot set prope…ore.umd.js:8486:93)↵ at Array.forEach (native)", originalStack: "Error: Uncaught (in promise): TypeError: Cannot se…ps://unpkg.com/[email protected]/dist/zone.js:349:25)", zoneAwareStack: "Error: Uncaught (in promise): TypeError: Cannot se…g.com/[email protected]/dist/zone.js:349:25) []", name: "Error"…}

Is the first pattern (with do) not illegal indeed?

Answer 1

one of the way is:

debounceTime will make subscription after given milliseconds. If not required,ignore.

distinctUntilChanged will force subscription only on actual value change.

Update for Angular 8+

     this.form.controls['form_control_name']
                .valueChanges
                .pipe(
                    .debounceTime(MilliSeconds)
                    .distinctUntilChanged()
                )
                .subscribe({
                    next: (value) => {
                        //use value here
                    }
                });