Which @angular/* package(s) are relevant/related to the feature request?
forms
Description
The new debounce option for validateAsync for signal forms is great. However, it is currently not exposed that the debounce is running as the pending state on the form field only reflects the pending nature of the validation.
Take this example, https://stackblitz.com/edit/stackblitz-starters-qwmbwmbi?file=src%2Fmain.ts, and type in the input field. Notice that the field only switches to pending once you stop typing for a second and the debounce duration completes.
Similarly, the error state only disappears after the debounce duration despite the error state being associated with previous value that is no longer present.
At the same time the debounced resource that is used internally and, therefore, its status is not accessible:
|
const debouncedResource = debounced(() => params(), opts.debounce); |
|
return opts.factory(debouncedResource.value); |
Proposed solution
Consider the validation of the form field already during the debounce duration as pending.
Additionally, this would improve the correlation between the current form value and error state as the error will immediately disappear if the user changes the form value and not keep considering the already adjusted value invalid during the debounce duration.
Alternatives considered
One could revert to using debounce on the form field and apply a the async validation without the debounce otion. This way one can tell if the debounce is pending by comparing the form field value() to the controlValue().
While this would mean that the form value and validation state are in sync, it's still lacking behind the user input, i.e., the error state will only disappear after the debounce duration when the user stops typing.
Which @angular/* package(s) are relevant/related to the feature request?
forms
Description
The new debounce option for
validateAsyncfor signal forms is great. However, it is currently not exposed that the debounce is running as the pending state on the form field only reflects the pending nature of the validation.Take this example, https://stackblitz.com/edit/stackblitz-starters-qwmbwmbi?file=src%2Fmain.ts, and type in the input field. Notice that the field only switches to pending once you stop typing for a second and the debounce duration completes.
Similarly, the error state only disappears after the debounce duration despite the error state being associated with previous value that is no longer present.
At the same time the debounced resource that is used internally and, therefore, its status is not accessible:
angular/packages/forms/signals/src/api/rules/validation/validate_async.ts
Lines 129 to 130 in 5516769
Proposed solution
Consider the validation of the form field already during the debounce duration as pending.
Additionally, this would improve the correlation between the current form value and error state as the error will immediately disappear if the user changes the form value and not keep considering the already adjusted value invalid during the debounce duration.
Alternatives considered
One could revert to using
debounceon the form field and apply a the async validation without the debounce otion. This way one can tell if the debounce is pending by comparing the form fieldvalue()to thecontrolValue().While this would mean that the form value and validation state are in sync, it's still lacking behind the user input, i.e., the error state will only disappear after the debounce duration when the user stops typing.