angular / angular/angular

Support full structural subtyping/"duck typing" for typed forms

Open
#49,374 2 comments 4 reactions 0 assignees View on GitHub
area: forms
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### Which @angular/* package(s) are relevant/related to the feature request?

forms

### Description

In TS you can take advantage of duck typing to assign objects that contain the full shape of another, for example:

```ts
value: { foo: string, bar: string };
subset: { foo: string };

subset = value;
```

This works through most generic types and classes as well (eg. a `Promise` can be used in place of a `Promise`).

However, this doesn't work (most of the time) when assigning across `FormGroup`s. This would be a useful feature for shareable/generic form components - they could take a `FormGroup` of a certain type, where some (or all) fields might be optional, but where the passing component can specify some of them.

Some examples are in this stackblitz: https://stackblitz.com/edit/angular-jgpu5s?file=src/main.ts

The error (specifically in the second example) suggests the type is forcing the assignability check in both directions regardless of which side is actually being assigned, while the two types are at least somewhat compatible (can be compared).

The only alternative at the moment is to use the least restrictive type for everything, which can add unneeded fields to the usages, and/or add unneeded and cumbersome optionality/nullability.

Wasn't sure whether to put this as a feature request or bug, since there might actually be a functional difference/design decision that I'm not understanding. Possibly (?) related to https://github.com/angular/angular/issues/47091 but that seemed a bit more specific and had some inheritence/extension complexity.

### Proposed solution

Support this:

```ts
formGroup: FormGroup<{ foo: FormControl; bar: FormControl };
formGroupSubset: FormGroup<{ foo: FormControl }>;

formGroupSubset = formGroup;
```

or at least this:

```ts
formGroup: FormGroup<{ foo: FormControl; bar: FormControl };
optionalFormGroup: FormGroup<{ foo?: FormControl, bar?: FormControl }>;

optionalFormGroup = formGroup;
```

### Alternatives considered

N/A?

Contributor guide

Open the contributing guide

Research direction

Start with Angular's forms package and reproduce the typed FormGroup assignments from the linked StackBlitz. Compare the full, subset, and optional FormGroup examples, then determine whether the proposed assignments can be supported without weakening unrelated type checks. Done means the requested assignments type-check as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.