Form Status Changes observable, should also emit the Value used for validation.

Which @angular/* package(s) are relevant/releated to the feature request?

forms

Description

We have a requirement to make a call to API every time the value of form is changed, we need to make an API call, if it is valid. Form is a complex form with multiple child groups and child arrays.

Since valueChanges is fired before statusChanges and since statusChanges can be async; it is not possible to do this in a reliable way.

Proposed solution

statusChanges event should also emit the value used for calculating the status.

Alternatives considered

To solve this issue, I am using the following observable. This is not ideal, however I could not think of a better way.

const filterSetValidityChanged$ = this.searchForm.get('filterSet').statusChanges.pipe();
const filterSetChanged$ = this.searchForm.get('filterSet').valueChanges.pipe();

const filterSetChangedAndIsValid$ = filterSetValidityChanged$.pipe(
  filter(a => a === 'VALID'),
  withLatestFrom(filterSetChanged$),
  map(([, value]) => value));

[dylhunn]

Why do you need withLatestFrom? It seems to me that you could write a little helper function that does the job. Like:

function validValues(control: AbstractControl) {
  return control.statusChanges.pipe(
    filter((a) => a === 'VALID'),
    map(() => control.value),
  );
}

I think the issue is that the value might have changed in the meantime, since the validation is async and could take a while.

[dylhunn]

This might be solvable in the context of #10887, if we had a unified event payload that contained both the value and status for all state changes.