Expose ControlConfig type under @angular/forms #46570
Description
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
Expose ControlConfig type in public API
export type ControlConfig<T> = [T|FormControlState<T>, (ValidatorFn|(ValidatorFn[]))?, (AsyncValidatorFn|AsyncValidatorFn[])?];https://github.com/angular/angular/blob/main/packages/forms/src/form_builder.ts#L32
So, ControlConfig type can be consumed within applications like this:
import { ControlConfig } from '@angular/forms';
Please provide a link to a minimal reproduction of the bug
> npx @angular/cli@next new web-apps --create-application false --strict> cd web-apps> yarn ng generate app admin-console --routing --style css- Edit
projects/admin-console/src/app/app.component.tsand replace with this code
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
AsyncValidatorFn,
FormControl,
FormControlState,
FormGroup,
NonNullableFormBuilder,
ValidatorFn,
Validators,
} from '@angular/forms';
interface Credentials {
email: string;
password: string;
}
interface LoginCredentialsInitialReactiveFormGroup {
email: ControlConfig<string>;
password: ControlConfig<string>;
}
interface LoginCredentialsReactiveFormGroup {
email: FormControl<string>;
password: FormControl<string>;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
title = 'admin-console';
public loginFormGroup: FormGroup<LoginCredentialsReactiveFormGroup>;
constructor(private readonly fb: NonNullableFormBuilder) {
this.loginFormGroup =
this.fb.group<LoginCredentialsInitialReactiveFormGroup>({
email: ['', [Validators.required]],
password: ['', [Validators.required]],
});
const afterSubmitData: Credentials = this.loginFormGroup.getRawValue();
}
}Please provide the exception or error you saw
Cannot find name 'ControlConfig'. ts(2304)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.1.0-next.3
Node: 16.15.1
Package Manager: npm 8.11.0
OS: darwin arm64
Angular: 14.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.0-next.3
@angular-devkit/build-angular 14.1.0-next.3
@angular-devkit/core 14.1.0-next.3
@angular-devkit/schematics 14.1.0-next.3
@angular/cli 14.1.0-next.3
@schematics/angular 14.1.0-next.3
rxjs 7.5.5
typescript 4.7.4
Anything else?
After you review the reproduction example, Could you describe an approach where we can achieve the same results with 1 interface instead of 3 interfaces?
Perhaps some typescript utility types could be provided out of the box.
Example:
export type ControlsOf<T extends Record<string, any>> = {
[K in keyof T]: T[K] extends Record<any, any>
? FormGroup<ControlsOf<T[K]>>
: FormControl<T[K]>;
};as mentioned in https://netbasal.com/typed-reactive-forms-in-angular-no-longer-a-type-dream-bf6982b0af28