Skip to content

test(forms): support directive composition with FormField#67660

Open
leonsenft wants to merge 1 commit intoangular:mainfrom
leonsenft:sf-form-field-host-directive
Open

test(forms): support directive composition with FormField#67660
leonsenft wants to merge 1 commit intoangular:mainfrom
leonsenft:sf-form-field-host-directive

Conversation

@leonsenft
Copy link
Contributor

@leonsenft leonsenft commented Mar 12, 2026

Support composing the FormField directive with custom controls:

@Component({
  hostDirectives: [
    {directive: FormField, inputs: ['formField']},
  ],
})
export class MyControl implements FormValueControl<...> { ... }

IMPORTANT: The formField input must be exposed as-is, without aliasing to function properly.

For more on directive composition, see
https://angular.dev/guide/directives/directive-composition-api.

@leonsenft leonsenft requested a review from kirjs March 12, 2026 20:49
@leonsenft leonsenft added area: forms target: patch This PR is targeted for the next patch release forms: signals labels Mar 12, 2026
@ngbot ngbot bot added this to the Backlog milestone Mar 12, 2026
Support composing the `FormField` directive with custom controls:

```ts
import {FormField, FormValueControl} from '@angular/forms/signals';

@component({
  hostDirectives: [
    {directive: FormField, inputs: ['formField']},
  ],
})
export class MyControl implements FormValueControl<...> { ... }
```

IMPORTANT: The `formField` input _must_ be exposed as-is, without
aliasing to function properly.

For more on directive composition, see
https://angular.dev/guide/directives/directive-composition-api.
@leonsenft
Copy link
Contributor Author

@arm1n Please let me know if this fails to address your use case, at head FormField as a host directive appears to simply be working.

@leonsenft leonsenft requested a review from alxhub March 23, 2026 20:22

@Component({
selector: 'custom-control',
host: {'tabindex': '-1'},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's tabindex for here?

expect(comp.customControl().errors()).toEqual([]);
});

it('should bind to a custom control when composed as a host directive', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should bind errors ?

expect(component.customControl().required()).toBe(true);
});

it('should bind to a custom control when composed as a host directive', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are like 15 tests with the same name

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: forms forms: signals target: patch This PR is targeted for the next patch release

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

2 participants