Use RxJS Streams with Angular 2 Forms

Angular2 - 6

Share this video with your friends

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

Morgan

~ 8 years ago

you need to mention that you import ViewChild from angular core

rkrisztian

~ 7 years ago

Do you really need to import the combineLatest operator if you use it as Observable.combineLatest, rather than as this.form.statusChanges.combineLatest? Coz I don't think so.

Prem Prakash

~ 6 years ago

combineLatest here also prints the 'INVALID' form status even after filtering. Possibly because first the valueChange event happens with the latest on status still being VALID. So even when the value becomes invalid, form status is still VALID and hence the invalid value still passes through the filter and gets printed in console. I don't know how to fix this. It will be good to know the fix though.

sxlwar

~ 6 years ago

@Prem Use zip instead of combineLatest will fix this issue.

Guru Inamdar

~ 6 years ago

 const a$ = combineLatest(
      this.form.statusChanges,
      this.form.valueChanges,
      (status, value) => ({status, value})
    );
    a$.pipe(
      filter(({status}) => status === 'VALID')
    )
      .subscribe(({value}) => console.table(value));

Guru Inamdar

~ 6 years ago

although 7 has deprecated warning on combineLatest