Form typing does not work with form builder group shorthand
See original GitHub issueWhich @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
Issue Analytics
- State:
- Created 10 months ago
- Reactions:2
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Typed Forms - Angular
Angular provides the FormGroup type for forms with an enumerated set of keys, and a type called FormRecord , for open-ended or dynamic...
Read more >Wrong FormControl type inference when created with ... - GitHub
If you use the long way to add control, everything works just fine but we loose FormBuilder.group() shorthand synthax benefit.
Read more >how to implement shorthand validation in angular forms?
Validation can depend on the type of forms being used, since you attempted ... myForm = formBuilder.group({ mob: ['', [Validators.required, ...
Read more >Angular Reactive Forms: Tips and Tricks | by Netanel Basal
Using FormBuilder There are times when we need to create a large form structure. In this case, the code can rapidly become repetitive...
Read more >Managing Nested and Dynamic Forms in Angular - Bitovi
Fortunately Angular has shorthand syntax we can use thanks to the FormBuilder class.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah there is a limitation still existing on V15.
[T] extends [PermissiveControlConfig<infer U>] ? FormControl<Exclude<U, ValidatorConfig>|N> :
could be improve to[T] extends [PermissiveControlConfig<infer U>] ? FormControl<Exclude<U, ValidatorConfig | AbstractControlOptions>|N> in
form_builder.tsThis issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.