Add an alternative NoInferFormBuilder
- 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
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