fix(forms): Prevent FormBuilder from distributing unions to control types

[dylhunn]

Previously, using FormBuilder with a union type would produce unions of controls:

// `foo` has type `FormControl<string>|FormControl<number>`.
const c = fb.nonNullable.group({foo: 'bar' as string | number});

This actually works in many cases, due to how extraordinarily powerful Typescript's distributive types are (e.g. value still has type string|number), but it is subtly incorrect. Here is a code example that exposes the reason the inference is incorrect. It exploits the fact that Typescript will not "un-distribute" a type, producing an obviously spurious error:

// fc gets an inferred distributive union type `FormControl<string> | FormControl<number>`
let fc = c.controls.foo;
// Error: Type 'FormControl<string | number>' is not assignable to type 'FormControl<string> | FormControl<number>'.
fc = new FormControl<string|number>('', {initialValueIsDefault: true});

Instead, we want the union to apply to the values:

// `foo` should have type `FormControl<string|number>`.
const c = fb.nonNullable.group({foo: 'bar' as string | number});

Essentially, we want to prevent Typescript from distributing the type. The handbook suggests a solution when distributivity is not wanted:

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

This PR applies the above suggestion to FormBuilder's helper type.

Fixes #45912.

[AndrewKushnir]

This PR was merged into the repository by commit e441ff4.

[angular-automatic-lock-bot]

This 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.}