angular / angular/angular

Add an alternative NoInferFormBuilder

Open
#58,001 0 comments 1 reaction 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

Currently form builder supports multiple form creation options and due to that and typescript issues some patterns are really problematic to use. For example:
```ts
// Infers string - fails
formBuilder.group<{a: FormGroup<{a: FormControl<'a' | 'b'>}>}>({a: formBuilder.group({a: formBuilder.control('a')})});
// Fails to infer array type
formBuilder.group<{a: FormArray>}>({a: formBuilder.array([])});
// Incorrect auto complete here (in ...) - k has unknown type
formBuilder.group<{g: FormGroup<{k: FormGroup<{a: FormControl}>}>}>({g: formBuilder.group({...})});
```

### Proposed solution

Create a new form builder variation which is oriented to cases when you provide the form type yourself. The new form builder will use `NoInfer` for parameter so the inference will be strictly from the return type which will solve the problems above.
An example implementation that will solve all the issues above:
```ts
export class NoInferFormBuilder {
control(
formState: NoInfer>,
validatorOrOpts?:
| ValidatorFn
| ValidatorFn[]
| AbstractControlOptions
| null,
asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
) {
return new FormControl(formState, validatorOrOpts, asyncValidator);
}

group<
T extends {
[K in keyof T]: AbstractControl;
}
>(
controls: NoInfer,
validatorOrOpts?:
| ValidatorFn
| ValidatorFn[]
| AbstractControlOptions
| null,
asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
) {
return new FormGroup(controls, validatorOrOpts, asyncValidator);
}

array>(
controls: NoInfer,
validatorOrOpts?:
| ValidatorFn
| ValidatorFn[]
| AbstractControlOptions
| null,
asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
) {
return new FormArray(controls, validatorOrOpts, asyncValidator);
}
}
```

### Alternatives considered

Get around those problems which can be annoying and repetitive or use form classes which helps to some extent or use untyped forms.

Contributor guide

Open the contributing guide

Research direction

Start with Angular's forms package and the existing FormBuilder entry point, then compare the control, group, and array signatures with the proposed NoInferFormBuilder API. Confirm how the generic constraints and validators should behave, and consider the typing examples in the issue as the acceptance cases; done means the three shown inference and autocomplete problems are resolved without regressing existing form-builder behavior.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.