Skip to content

Signal forms: Creating custom fields dynamically with Field directive doesn't attach status and value to field #64632

Closed

Description

@vitor-dev-get

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

forms

Is this a regression?

No

Description

When using viewContainerRef to create components that use the new Field directive, the directive doesn't link status nor value to the custom field

@Component({
  selector: 'my-input',
  template:
    '<input #i [value]="value()" [disabled]="disabled()" (input)="value.set(i.value)" />',
})
class CustomInput implements FormValueControl<string> {
  value = model('');
  disabled = input<boolean>(false);
}

@Component({
  selector: 'app-root',
  template: `
    <ng-container #outlet />
    <my-input [field]="form" />
  `,
  imports: [CustomInput, Field],
})
export class Playground {
  form = form(signal('test'), (ctx) => {
    disabled(ctx, () => true);
  });

  vcr = viewChild.required('outlet', { read: ViewContainerRef });

  constructor() {
    afterNextRender(() =>
      this.vcr().createComponent(CustomInput, {
        directives: [
          {
            type: Field as never,
            bindings: [inputBinding('field', this.form)],
          },
        ],
      })
    );
  }
}

In the example, the dynamically created doesn't get disabled, nor any status or value

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/vartutww?file=src%2Fmain.ts

Please provide the exception or error you saw


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

Angular CLI       : 21.0.0-next.8
Angular           : 21.0.0-next.8
Node.js           : 20.19.1
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations       │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/build            │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/cdk              │ 21.0.0-next.9     │ ^21.0.0-next      │
│ @angular/cli              │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/common           │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/compiler         │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/compiler-cli     │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/core             │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/forms            │ 21.0.0-next.8     │ ^21.0.0-next      │
│ @angular/material         │ 21.0.0-next.9     │ ^21.0.0-next      │
│ @angular/platform-browser │ 21.0.0-next.8     │ ^21.0.0-next      │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ zone.js                   │ 0.15.1            │ ~0.15.0           │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Activity

  1. added this to the needsTriage milestone on Oct 23, 2025
  2. mmalerba commented on Nov 18, 2025

    @mmalerba
    Contributor

    Thanks for the issue report, this is a known issue that we hope to fix soon

  3. added 4 commits that reference this issue on Nov 24, 2025
    e41f70d
    745646d
    aaa50db
    8a58c5d
  4. added 3 commits that reference this issue on Nov 26, 2025
    fcddc7f
    9e723f5
    ec45645
  5. added a commit that references this issue on Dec 3, 2025
    a5dbd4b
  6. angular-automatic-lock-bot commented on Jan 3, 2026

    @angular-automatic-lock-bot

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  7. locked and limited conversation to collaborators on Jan 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions