FormGroup.reset() input typings are incorrect

[david-snyder-induro]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

The example for resetting a FormGroup that is given here does not match the typing of FormGroup.reset(). According to the typings, that {value: 'name', disabled: true} is invalid.

The typing of FormGroup.reset() should accept {value: T, disabled: boolean} for a FormControl because that is how the functionality works.

Please provide a link to a minimal reproduction of the bug

https://replit.com/@david-snyder-in/Typing-Issues#src/app/app.component.ts

Please provide the exception or error you saw

Type '{ value: string; disabled: true; }' is not assignable to type 'string'.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.3.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.2
@angular-devkit/build-angular   17.3.2
@angular-devkit/core            17.3.2
@angular-devkit/schematics      17.3.2
@angular/fire                   17.0.1
@schematics/angular             17.3.2
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Anything else?

No response

[yousefalaqra]

@JeanMeche Can i start be working on this issue?

[TWGopaul]

This looks like a Typescript type error. In Typescript it is helpful to assign types to variables. For example the syntax goes like:
let name:string = ver.go

We're saying that a variable called name is a string and assigning it a value.

The message is saying that first should be a string and that you are trying to assign it a type of '{value:string, disabled:true}'.

Notice how the format of {value: 'name', disabled: true} matches the error message {value:string, disabled:true} .

I'm having trouble getting the error message but I'd try the following:

form.reset({ form.first: {value: 'name', disabled: true}, form.last: 'last' });

[waw3ru]

It seems the docs are giving the wrong direction here. Because the type of form.reset as per your example is:

  override reset(
    value: ɵTypedOrUntyped<
      TControl,
      ɵFormGroupValue<TControl>,
      any
    > = {} as unknown as ɵFormGroupValue<TControl>,
    options: {onlySelf?: boolean; emitEvent?: boolean} = {},
  ): void {
    this._forEachChild((control: AbstractControl, name) => {
      control.reset(value ? (value as any)[name] : null, {
        onlySelf: true,
        emitEvent: options.emitEvent,
      });
    });
    // ...
  }

As you can see it goes through object provided and calls for each control the reset method. The AbstractControl reset type is

abstract reset(value?: TValue, options?: Object): void;

Meaning the value you passed disabled: true seems to be read as part of the FormControl value instead of a FormControl modifier.

The best options is:

form.reset({
  first: 'name',
  last: 'last'
});

form.get('first').disable();