markAllAsDirty not doing anything

[shajz]

Is this a regression?

Yes

Description

Hello, a week ago, I migrated a project from angular 12 to angular 13. I bumped reactive-forms from ^1.7.5 to ^4.0.2 (quite a huge bump...)

All my forms use the same pattern when submitting

if (this.form.invalid) {
  this.form.markAllAsDirty();
  this.form.markAllAsTouched();
  this.form.updateValueAndValidity();
  return;
}
// do stuff when valid

It seems that markAllAsDirty doesn't work as expected anymore. We had to replace this call with a custom function

export function recursiveMarkAsDirty(ctrl: AbstractControl) {
  ctrl.markAsDirty({ onlySelf: true });
  const controls: Array<AbstractControl> =
    ctrl instanceof FormGroup ? Object.values(ctrl.controls) : ctrl instanceof FormArray ? ctrl.controls : [];
  controls.forEach((subCtrl) => recursiveMarkAsDirty(subCtrl));
}

and we now call recursiveMarkAsDirty(this.form) instead of this.form.markAllAsDirty() when submitting.

All forms are created like this

form = new FormGroup({
  lorem: new FormGroup({
    someNumber: new FormControl<number>(undefined, [Validators.required]),
    someString: new FormControl<string>(undefined, [Validators.required]),
    someFormArray: new FormArray<OneCustomType>([]),
  }),
  someDate: new FormControl<Date>(undefined, [Validators.required]),
  anEmptyString: new FormControl<string>('', [Validators.required]),
});

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

When using `markAllAsDirty`, fields remain non dirty

Please provide the environment you discovered this bug in

@angular 13.1.0
@ngneat/reactive-forms 4.0.2

Anything else?

No response

Do you want to create a pull request?

No

[NetanelBasal]

We didn't changed the implementation:

• v2
• v4

[shajz]

I figured out what's missing. The markAllAsDirty method used to exist on FormControl (see https://github.com/ngneat/reactive-forms/blob/v2.0.0/projects/ngneat/reactive-forms/src/lib/formControl.ts#L141 in v2) but it's gone on v4 (see https://github.com/ngneat/reactive-forms/blob/v4.0.2/libs/reactive-forms/src/lib/form-control.ts)

export function markAllDirty(control: AbstractControl): void {
  // control is FormGroup with some nested FormControl
  control.markAsDirty({ onlySelf: true });
  // ok formGroup is markedAsDirty, nice.

  // let's call the following for its nested FormControls
  (control as any)._forEachChild((control: any) => {
     // control.markAllAsDirty is undefined, no method call, no control.markAsDirty({ onlySelf: true }); 
     control.markAllAsDirty?.();
  });
  // FormControl have no markAllAsDirty method... so will never be called for them
}

This gets fixed by either adding a markAllAsDirty method on FormControl (which doesn't really make sense). Instead, changing the last line like this makes more sense

(control as any)._forEachChild((control: any) => control.markAllAsDirty?.() || control.markAsDirty({ onlySelf: true }));

I'll submit a PR

[NetanelBasal]

Nice! thanks