diff --git a/packages/forms/src/form_builder.ts b/packages/forms/src/form_builder.ts index 03b20b73fb3fe..7703703272568 100644 --- a/packages/forms/src/form_builder.ts +++ b/packages/forms/src/form_builder.ts @@ -38,6 +38,14 @@ type ValidatorConfig = ValidatorFn|AsyncValidatorFn|ValidatorFn[]|AsyncValidator */ type PermissiveControlConfig = Array|ValidatorConfig>; +/** + * Helper type to allow the compiler to accept [XXXX, { updateOn: string }] as a valid shorthand + * argument for .group() + */ +interface PermissiveAbstractControlOptions extends Omit { + updateOn?: string; +} + /** * ControlConfig is a tuple containing a value of type T, plus optional validators and async * validators. @@ -82,7 +90,7 @@ export type ɵElement = // FormControlState object container, which produces a nullable control. [T] extends [FormControlState] ? FormControl : // A ControlConfig tuple, which produces a nullable control. - [T] extends [PermissiveControlConfig] ? FormControl|N> : + [T] extends [PermissiveControlConfig] ? FormControl|N> : FormControl; // clang-format on diff --git a/packages/forms/test/form_builder_spec.ts b/packages/forms/test/form_builder_spec.ts index b0127f75ef454..2beb86cdc0ae2 100644 --- a/packages/forms/test/form_builder_spec.ts +++ b/packages/forms/test/form_builder_spec.ts @@ -189,6 +189,22 @@ describe('Form Builder', () => { expect(g.asyncValidator).toBe(null); }); + it('should create groups with shorthand parameters and with right typings', () => { + const form = b.group({ + shorthand: [3, Validators.required], + shorthand2: [5, {validators: Validators.required}], + }); + + expect((form.get('shorthand')?.value)).toEqual(3); + expect(((form.get('shorthand2')!.value ?? 0) + 0)).toEqual(5); + + + const form2 = b.group({ + shorthand2: [5, {updateOn: 'blur'}], + }); + expect(((form2.get('shorthand2')!.value ?? 0) + 0)).toEqual(5); + }); + it('should create control arrays', () => { const c = b.control('three'); const e = b.control(null);