Signal forms: Creating custom fields dynamically with Field directive doesn't attach status and value to field #64632
Description
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
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