Validate async signal leaks resource internals

Look at the validateAsync function in @angular/forms, particularly how it handles debounced signals and the Resource interface. The reproduction repo shows the error. Understand the resourceFromSnapshots and resource APIs. The fix likely involves ensuring the signal passed to the factory does not throw internal sentinel errors when debounce is used.

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

Let's say we have a function like this:

type Result = { loading: true } | { loading: false; value: string }

function injectResult(value: () => string): Signal<Result> {
  // The implementation could be more complex than this,
  // but the issue still happens with only this code.
  return computed(() => ({ loading: false, value: value() }))
}

const value = signal('Hello Angular!')

const result: Signal<Result> = injectResult(() => value())

We can convert it to a resource like this:

function toSnapshot(result: Result) {
  if (result.loading) {
    return { status: 'loading', value: undefined }
  }
  return { status: 'resolved', value: result.value }
}

function toResource(result: Signal<Result>) {
  return resourceFromSnapshots(() => toSnapshot(result()))
}

Since validateAsync works with the Resource interface (not the API), one might expect this to work:

@Component({ ... })
export class Registration {
  registrationModel = signal({ username: '' })
  registrationForm = form(this.registrationModel, (schemaPath) => {
    validateAsync(schemaPath.username, {
      params: ({ value }) => value(),
      factory: (value) => {
        const result = injectResult(value)
        return toResource(result)
      },
      onSuccess: () => {},
      onError: () => {},
    })
  })
}

This works with those options, but if we add debounce to the validateAsync options, we get:

ERROR _ResourceParamsStatus: LOADING

The workaround is to wrap the validation signal in a resource to catch the internal sentinel error:

factory: (value) => {
  const settled = resource({
    params: () => value(),
    loader: async ({ params }) => params,
  })

  const result = injectResult(() => {
    return settled.hasValue() ? settled.value() : ''
  })
  return toResource(result)
}

---

The expectation is that the signal passed to factory contains the debounced value, rather than a signal that may throw.

Requiring that signal to be used with the resource API (not just the interface) makes it harder for libraries that do not use that API to integrate with Signal Forms, but can provide a Resource Interface. For example, libraries like a resouce-like API for localstorage and query/sync libraries.

Please provide a link to a minimal reproduction of the bug

https://github.com/benjavicente/angular-validate-async-resource-repro

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.1.8            │ ^22.0.0           │
│ @angular/cli              │ 22.1.8            │ ^22.0.0           │
│ @angular/common           │ 22.1.7            │ ^22.0.0           │
│ @angular/compiler         │ 22.1.7            │ ^22.0.0           │
│ @angular/compiler-cli     │ 22.1.7            │ ^22.0.0           │
│ @angular/core             │ 22.1.7            │ ^22.0.0           │
│ @angular/forms            │ 22.1.7            │ ^22.0.0           │
│ @angular/platform-browser │ 22.1.7            │ ^22.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response