René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Make built-in validator directives standalone","articleBody":"### Which @angular/* package(s) are relevant/related to the feature request?\r\n\r\n@angular/forms\r\n\r\n### Description\r\n\r\nI am building a set of configurable form field components that uses the directive composition API. I want to reuse Angular's built-in validator directives to define what validators are applicable to each field without re-implementing them in each form field component. \r\n\r\n```ts\r\n@Component({\r\n  standalone: true,\r\n  selector: 'form-field[type=\"project-id\"]',\r\n  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],\r\n  template: `\r\n    \u003cmat-form-field\u003e\r\n      \u003cmat-label\u003eProject ID\u003c/mat-label\u003e\r\n      \u003cinput matInput [formControl]=\"control\" /\u003e\r\n      @if (control.hasError('required')) {\r\n      \u003cmat-error\u003eProject ID is required\u003c/mat-error\u003e\r\n      }\r\n    \u003c/mat-form-field\u003e\r\n  `,\r\n  hostDirectives: [{\r\n    directive: RequiredValidator, // TS-992014: Host directive RequiredValidator must be standalone\r\n    inputs: ['required']\r\n  }, {\r\n    directive: FormFieldDirective // implements ControlValueAccessor\r\n  }],\r\n  providers: provideFormField(ProjectIdFieldComponent),\r\n})\r\nexport class ProjectIdFieldComponent {\r\n  control = new FormControl();\r\n}\r\n```\r\n\r\n```html\r\n\u003cform-field type=\"project-id\" [(ngModel)]=\"projectId\" [required]=\"required\" /\u003e\r\n```\r\n\r\nRelated issue: https://github.com/angular/angular/issues/51248\r\n\r\n### Proposed solution\r\n\r\nAdd the standalone flag to existing validator directives.\r\n\r\n### Alternatives considered\r\n\r\nI am currently converting these to standalone directives myself.\r\n\r\n```ts\r\n@Directive({\r\n  standalone: true,\r\n  providers: [provideValidator(StandaloneRequiredValidator)]\r\n})\r\nexport class StandaloneRequiredValidator extends RequiredValidator {}\r\n\r\n...etc\r\n```\r\n\r\n```ts\r\n@Component({\r\n  hostDirectives: [{\r\n    directive: StandaloneRequiredValidator, // now it works\r\n    inputs: ['required']\r\n  }],\r\n})\r\nexport class ProjectIdFieldComponent {}\r\n```\r\n","author":{"url":"https://github.com/chronospatian","@type":"Person","name":"chronospatian"},"datePublished":"2024-06-02T22:01:47.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/56226/angular/issues/56226"}