angular / angular/angular

FR: Better default debugNames for internal signals (computed / input), especially for signal forms

Open
#66,319 0 comments 6 reactions 0 assignees View on GitHub
area: forms forms: signals
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

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

_No response_

### Description

When debugging an app that uses signal forms, I tend to get error messages like

`ERROR RuntimeError: NG0950: Input "field" is required but no value is available yet. Find more at https://v21.angular.dev/errors/NG0950`

Example see e.g. https://stackblitz.com/~/github.com/ptandler/angular-signal-form-value-control-reactive-form-interop?file=src/main.ts

### Proposed solution

It would be amazing ❤️ if `form()` and the `[field]` directive could provide a better default debugName to easier detect which field is required, e.g.
- include the component's name (or selector) in which the directive or form is defined
- include the name of the element a directive has been bound to
- if assigned to a prop (input, form), include also the prop name (i.e. `class SomeComponent { myForm = form(signal()); }` -> something like `form@SomeComponent.myForm` and then nested `form.someField.andAnother@SomeComponent.myForm`

Is it possible to get some name from the current / given injection context?

### Alternatives considered

Well, for now, I set breakpoints and try to figure out the context myself 😁 If the app is small enough, then that's fine.

Contributor guide

Open the contributing guide

Research direction

The issue names signal forms' form() API and the [field] directive but provides no files or tests. Start by tracing how their internal computed and input signals receive debug names, then assess what naming context is available from injection. Done would require an agreed naming scheme and tests covering the proposed form and field names.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.