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
|
||
|---|---|---|
| .. | ||
| acceptance | ||
| animation | ||
| bundling | ||
| change_detection | ||
| compiler | ||
| debug | ||
| di | ||
| dom | ||
| i18n | ||
| linker | ||
| metadata | ||
| reflection | ||
| render3 | ||
| sanitization | ||
| strict_types | ||
| testability | ||
| util | ||
| zone | ||
| application_init_spec.ts | ||
| application_module_spec.ts | ||
| application_ref_integration_spec.ts | ||
| application_ref_spec.ts | ||
| BUILD.bazel | ||
| component_fixture_spec.ts | ||
| dev_mode_spec.ts | ||
| directive_lifecycle_integration_spec.ts | ||
| error_handler_spec.ts | ||
| event_emitter_spec.ts | ||
| fake_async_spec.ts | ||
| forward_ref_integration_spec.ts | ||
| runtime_error_spec.ts | ||
| test_bed_spec.ts | ||
| util_spec.ts | ||