Possibility to add multiple updateOn events

[pavel-blagodov]

[x] Feature request

It would be nice to add support for multiple updateOn: events. e.g updateOn: "blur submit".

There is scenario where single "blur" is not enough.

For example:

1. we have simple form with 2 fields and one submit button
2. user enters value for the first field and navigates to the second one
3. user enters value for the second field and submit form by pressing enter key

In my example, the form will be submitted with empty value in the second filed.

[noah2233]

Is there an update on this issue?

[sambaptista]

Actually building an app with save on the fly (without submit button), I use {updateOn:'blur'} for now.

Would be helpfull to continue to have native forms like behavior where [enter] in a text field would emit the change and cause formGroup.valueChanges to be called.

[rutgervd]

I would like to see this as well, make the updateOn accept an array of values:

updateOn: ['change', 'blur']

[herclogon]

updateOn: 'change' emit valueChanges on each user keypress, updateOn: 'blur' on blur - it's OK. But what about the case when you use <input> and want to get changes on blur + enter keypress?

[mckramer]

I have the same use-case where blur is used, but when hitting "enter", the value is not committed. A simple example is here: https://angular-qntfgd.stackblitz.io

I agree with @pavel-blagodov, but I think an alternative to supporting multiple updateOn values, would simply like to see pending changes committed on submit.

Option 1: Support multiple updateOn values

I think it would be feasible to make this type of change, but would touch a lot of places.

Option 2: Commit pending changes on submit

I think generally the updateOn options should build on each other. i.e. change should also commit on blur + submit, and blur should also commit on submit.

When a form is submitted, onSubmit ends up calling FormControl's _syncPendingControls. This is guarded by updatedOn === 'submit'. I would prefer to remove this guard and always execute this on submit.

Current workarounds

I have played with two re-usable workarounds, but I do not like them.

1. In ngSubmit handler, try to force focus away and back to input (invisible to user) to trigger blur
2. In ngSubmit handler, re-create the syncPendingControls logic without the guard

---

Has anyone from Angular team weighed in? I'd be willing to take a pass at a PR if a path was suggested.

[jorroll]

I just made a proposal which addresses this issue over in #31963. I'd be very interested in any feedback folks might have. Specifically, it allows a service to add/remove errors from a control. Because errors are keyed to the service which adds them, one service cannot overwrite another's errors.

As an example:

const usernameControl = new FormControl();

usernameControl.valueChanges
  .pipe(
    tap(() => usernameControl.markPending('userService', true)),
    debounceTime(500),
    switchMap(value => this.userService.doesNameExist(value)),
    tap(() => usernameControl.markPending('userService', false)),
    map(response => ({
      sources: ['MyUserService'],
      type: 'errors',
      value: response.payload ? { userNameExists: true } : null, // <-- this is an error (or null)
    })),
  )
  .subscribe(usernameControl.source);

This hypothetical service is checking the value of a usernameControl to see if the username already exists. If it does, it's adding an error to the control (thats the .subscribe(usernameControl.source) line at the end).

More broadly, this allows you to programmatically add errors to a control however you see fit, either synchronously or asynchronously (in addition to using ValidatorFn / AsyncValidatorFn). This provides a holistic solution, allowing folks to determine the exact interval they want for error checking (and they can choose to use different intervals for different validation checks).

[gilsdav]

Possible workaround when updateOn is set to "blur": (keydown.enter)="$event.target.blur()"

[dylhunn]

This would require a large but shallow PR to change how we store updateOn.