Repository: angular
Issue: Custom form controls extending AbstractControl beyond the default ones
Labels: feature,area: forms,type: use-case,feature: under consideration

### Which @angular/* package(s) are relevant/releated to the feature request?

forms

### Description

Lately I have been struggling with reusing form areas. I read all about CVA and sub forms with inputs etc... They seemed to miss something. At the beginning I was sure CVA would be the best fit which almost was the case. The problem started when I needed to render parts of the form in tabs yet all of them created together one form. For the sake of the explanation let's take a simple date range component as an example. The control has built in validation to make sure the `from` field isn't greater than the `to` field. At some point I loaded an invalid form (wrong date range) due to business requirements to the form yet the form was valid. The reason was the CVA component included the validation yet it wasn't rendered. That brought me to think the missing part was the decoupling of form logic from the UI. In regular reactive forms it works well - in the TS you add controls and validators and only bind it to the html which doesn't necessarily need to be rendered. In the CVA or sub forms "land" the form and UI is coupled together.
The feature request I thought is why not create a class called `DateRangeFormControl` extending `AbstractControl`. The whole form logic with validations will be there while the UI will be in the component.
This allows us a few benefits:
1. Decoupled logic and UI - will solve the CVA validation problem from above
2. Possible reusability with different components
3. Still easily apply through `formControlName` and use inside say a form group in the parent

### Proposed solution

Having the possibility to create custom form controls and restrict components to accept specific custom control types in `formControlName`/ `formControl` or something similar.
For example if it was implemented:
1. A component called `date-range.component.ts` exists.
2. Adding another file near it called `date-range.form.ts` which contains:
```ts
export class DateRangeFormControl extends AbstractContol {
  // Implements DateRange specific logic here - model + validation + maybe custom functions
}
```
3. `DateRangeComponent` would implement CVA (or another interface?) and declare it only accepts `DateRangeFormControl` somehow so it can safely use its functions and structure.
4. In the parent component the ts declaration will be:
```ts
form = new FormGroup({
  one: new FormControl('...'),
  two: new DateRangeFormControl({from: ..., to: ...})
})
```
5. In the parent HTML the declaration will be:
```html
<app-date-range formControlName/customFormControlName="two"></app-date-range>
```

There are still a few things which require more thought - How to restrict to certain controls in a component? Can we use the same form directives? Is CVA the correct interface here (as we want to decouple the form logic yet CVA requires functions like `setValue` to be implemented on the component)? Probably using form group inside the custom form component is required yet how to achieve it as it should act as a form control to the outside? And I believe many more... 

### Alternatives considered

1. Regular CVA while hiding with display none instead of ngif
2. Pass form as input from parent
3. Create form in child and add it with `ControlContainer` injection
4. Create form in child and add it through parent view child

All of the above suffer from drawbacks - the proposed solution seems to fix them all