Form typing does not work with form builder group shorthand #48073
Description
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
When creating a form group using form builder, typings are not correctly assigned when using the form builder shorthand. When I use normal constructors it works correctly. This is an issue because I would like to give extra options to some of the form controls, but the shorthand no longer works.
form = this._formBuilder.group({
// Good
// length: new FormControl(0, { validators: Validators.required }),
// length: this._formBuilder.control(0, { validators: Validators.required }),
// length: [0, Validators.required],
// Bad
length: [5, { validators: Validators.required }]
});
constructor(private _formBuilder: FormBuilder) {
5 + this.form.get("length")!.value; // ERRORS HERE
}
Please provide a link to a minimal reproduction of the bug
https://codesandbox.io/s/heuristic-babbage-0nkgpv?file=/src/app/app.component.ts
Please provide the exception or error you saw
Operator '+' cannot be applied to types 'number' and 'number | { validators: (control: AbstractControl<any, any>) => ValidationErrors | null; }'.ts(2365)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.2.9
Node: 19.0.1 (Unsupported)
Package Manager: npm 8.19.2
OS: linux x64
Angular: 14.2.10
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.9
@angular-devkit/build-angular 14.2.9
@angular-devkit/core 14.2.9
@angular-devkit/schematics 14.2.9
@angular/cdk 14.2.6
@angular/cli 14.2.9
@angular/material 14.2.6
@schematics/angular 14.2.9
rxjs 7.5.5
typescript 4.8.4
Anything else?
No response