Use RxJS Streams with Angular 2 Forms
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.
you need to mention that you import ViewChild from angular core
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.
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.
@Prem Use zip instead of combineLatest will fix this issue.
const a$ = combineLatest(
this.form.statusChanges,
this.form.valueChanges,
(status, value) => ({status, value})
);
a$.pipe(
filter(({status}) => status === 'VALID')
)
.subscribe(({value}) => console.table(value));although 7 has deprecated warning on combineLatest