mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
f18e1739b8
Consider the case in which `FormBuilder` is used to construct a group with an optional field:
```
const controls = { name: fb.control('') };
const foo: FormGroup<{
name: FormControl<string | null>;
address?: FormControl<string | null>;
}> = fb.group<{
name: FormControl<string | null>;
address?: FormControl<string | null>;
}>(controls);
```
Today, with fully strict TypeScript settings, the above will not compile:
```
Types of property 'controls' are incompatible.
Type '{ name: FormControl<string | null>; address?: FormControl<FormGroup<SubFormControls> | null | undefined> | undefined; }' is not assignable to type '{ name: FormControl<string | null>; address?: FormGroup<SubFormControls> | undefined; }'.
```
Notice that the `fb.group(...)` is calculating the following type for address: `address?: FormControl<FormGroup<string|null>`. This is clearly wrong -- an extraneous `FormControl` has been added!
This is coming from the calculation of the result type of `fb.group(...)`. In the type definition, if we cannot detect the outer control type, [we assume it's just an unwrapped value, and automatically wrap it in `FormControl`](https://github.com/angular/angular/blob/14.0.0/packages/forms/src/form_builder.ts#L66).
Because the optional `{address?: FormControl<string|null>}` implicitly makes the RHS have type `FormControl<string|null>|undefined`, [the relevant condition is not satisfied](https://github.com/angular/angular/blob/14.0.0/packages/forms/src/form_builder.ts#L55). In particular, the condition expects just `FormGroup<T>`, not `FormGroup<T>|undefined`. So we assume `T` is a value type, and it gets wrapped with `FormControl`.
The solution is to add the cases where `undefined` is included in the union type when detecting which control `T` is (if any).
PR Close #46253
|
||
|---|---|---|
| .. | ||
| animations | ||
| bazel | ||
| benchpress | ||
| common | ||
| compiler | ||
| compiler-cli | ||
| core | ||
| docs | ||
| elements | ||
| examples | ||
| forms | ||
| language-service | ||
| localize | ||
| misc/angular-in-memory-web-api | ||
| platform-browser | ||
| platform-browser-dynamic | ||
| platform-server | ||
| private/testing | ||
| router | ||
| service-worker | ||
| upgrade | ||
| zone.js | ||
| BUILD.bazel | ||
| circular-deps-test.conf.js | ||
| empty.ts | ||
| goog.d.ts | ||
| license-banner.txt | ||
| README.md | ||
| system.d.ts | ||
| tsconfig-build.json | ||
| tsconfig-legacy-saucelabs.json | ||
| tsconfig-test.json | ||
| tsconfig-tsec-base.json | ||
| tsconfig.json | ||
| tsec-exemption.json | ||
| types.d.ts | ||
Angular
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
Usage information and reference details can be found in Angular documentation.
License: MIT