feat(forms): add markAllAsDirty to AbstractControl

aberonni · thePunderWoman · commit af88b844ec1d · 2025-04-02T12:43:25.000-04:00
Adds the `markAllAsDirty` method to the `AbstractControl` class. This method will mark the control and all its descendants as dirty. I pretty much just duplicated the behaviour and tests of `markAllAsTouched`. Fixes #55990
diff --git a/goldens/public-api/forms/index.api.md b/goldens/public-api/forms/index.api.md
@@ -50,6 +50,9 @@ export abstract class AbstractControl<TValue = any, TRawValue extends TValue = T
     hasError(errorCode: string, path?: Array<string | number> | string): boolean;
     hasValidator(validator: ValidatorFn): boolean;
     get invalid(): boolean;
+    markAllAsDirty(opts?: {
+        emitEvent?: boolean;
+    }): void;
     markAllAsTouched(opts?: {
         emitEvent?: boolean;
     }): void;
diff --git a/packages/forms/src/model/abstract_model.ts b/packages/forms/src/model/abstract_model.ts
@@ -990,6 +990,22 @@ export abstract class AbstractControl<TValue = any, TRawValue extends TValue = T
     }
   }
 
+  /**
+   * Marks the control and all its descendant controls as `dirty`.
+   * @see {@link markAsDirty()}
+   *
+   * @param opts Configuration options that determine how the control propagates changes
+   * and emits events after marking is applied.
+   * * `emitEvent`: When true or not supplied (the default), the `events`
+   * observable emits a `PristineChangeEvent` with the `pristine` property being `false`.
+   * When false, no events are emitted.
+   */
+  markAllAsDirty(opts: {emitEvent?: boolean} = {}): void {
+    this.markAsDirty({onlySelf: true, emitEvent: opts.emitEvent, sourceControl: this});
+
+    this._forEachChild((control: AbstractControl) => control.markAllAsDirty(opts));
+  }
+
   /**
    * Marks the control and all its descendant controls as `touched`.
    * @see {@link markAsTouched()}
diff --git a/packages/forms/test/form_array_spec.ts b/packages/forms/test/form_array_spec.ts
@@ -198,6 +198,59 @@ import {asyncValidator} from './util';
       });
     });
 
+    describe('markAllAsDirty', () => {
+      it('should mark all descendants as dirty', () => {
+        const formArray: FormArray = new FormArray([
+          new FormControl('v1') as AbstractControl,
+          new FormControl('v2'),
+          new FormGroup({'c1': new FormControl('v1')}),
+          new FormArray([new FormGroup({'c2': new FormControl('v2')})]),
+        ]);
+
+        expect(formArray.dirty).toBe(false);
+
+        const control1 = formArray.at(0) as FormControl;
+
+        expect(control1.dirty).toBe(false);
+
+        const group1 = formArray.at(2) as FormGroup;
+
+        expect(group1.dirty).toBe(false);
+
+        const group1Control1 = group1.get('c1') as FormControl;
+
+        expect(group1Control1.dirty).toBe(false);
+
+        const innerFormArray = formArray.at(3) as FormArray;
+
+        expect(innerFormArray.dirty).toBe(false);
+
+        const innerFormArrayGroup = innerFormArray.at(0) as FormGroup;
+
+        expect(innerFormArrayGroup.dirty).toBe(false);
+
+        const innerFormArrayGroupControl1 = innerFormArrayGroup.get('c2') as FormControl;
+
+        expect(innerFormArrayGroupControl1.dirty).toBe(false);
+
+        formArray.markAllAsDirty();
+
+        expect(formArray.dirty).toBe(true);
+
+        expect(control1.dirty).toBe(true);
+
+        expect(group1.dirty).toBe(true);
+
+        expect(group1Control1.dirty).toBe(true);
+
+        expect(innerFormArray.dirty).toBe(true);
+
+        expect(innerFormArrayGroup.dirty).toBe(true);
+
+        expect(innerFormArrayGroupControl1.dirty).toBe(true);
+      });
+    });
+
     describe('markAllAsTouched', () => {
       it('should mark all descendants as touched', () => {
         const formArray: FormArray = new FormArray([
diff --git a/packages/forms/test/form_control_spec.ts b/packages/forms/test/form_control_spec.ts
@@ -26,6 +26,15 @@ import {asyncValidator, asyncValidatorReturningObservable} from './util';
       expect(c.value).toBe(null);
     });
 
+    describe('markAllAsDirty', () => {
+      it('should mark only the control itself as dirty', () => {
+        const control = new FormControl('');
+        expect(control.dirty).toBe(false);
+        control.markAllAsDirty();
+        expect(control.dirty).toBe(true);
+      });
+    });
+
     describe('markAllAsTouched', () => {
       it('should mark only the control itself as touched', () => {
         const control = new FormControl('');
diff --git a/packages/forms/test/form_group_spec.ts b/packages/forms/test/form_group_spec.ts
@@ -82,9 +82,86 @@ import {FormControlStatus, StatusChangeEvent} from '../src/model/abstract_model'
       });
     });
 
+    describe('markAllAsDirty', () => {
+      let form: FormGroup;
+      let logger: any[];
+
+      beforeEach(() => {
+        form = new FormGroup({
+          'c1': new FormControl('v1'),
+          'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
+          'array': new FormArray([
+            new FormControl('v4') as any,
+            new FormControl('v5'),
+            new FormGroup({'c4': new FormControl('v4')}),
+          ]),
+        });
+        logger = [];
+      });
+
+      it('should mark all descendants as dirty', () => {
+        expect(form.dirty).toBe(false);
+
+        const control1 = form.get('c1') as FormControl;
+
+        expect(control1.dirty).toBe(false);
+
+        const innerGroup = form.get('group') as FormGroup;
+
+        expect(innerGroup.dirty).toBe(false);
+
+        const innerGroupFirstChildCtrl = innerGroup.get('c2') as FormControl;
+
+        expect(innerGroupFirstChildCtrl.dirty).toBe(false);
+
+        form.markAllAsDirty();
+
+        expect(form.dirty).toBe(true);
+
+        expect(control1.dirty).toBe(true);
+
+        expect(innerGroup.dirty).toBe(true);
+
+        expect(innerGroupFirstChildCtrl.dirty).toBe(true);
+
+        const innerGroupSecondChildCtrl = innerGroup.get('c3') as FormControl;
+
+        expect(innerGroupSecondChildCtrl.dirty).toBe(true);
+
+        const array = form.get('array') as FormArray;
+
+        expect(array.dirty).toBe(true);
+
+        const arrayFirstChildCtrl = array.at(0) as FormControl;
+
+        expect(arrayFirstChildCtrl.dirty).toBe(true);
+
+        const arraySecondChildCtrl = array.at(1) as FormControl;
+
+        expect(arraySecondChildCtrl.dirty).toBe(true);
+
+        const arrayFirstChildGroup = array.at(2) as FormGroup;
+
+        expect(arrayFirstChildGroup.dirty).toBe(true);
+
+        const arrayFirstChildGroupFirstChildCtrl = arrayFirstChildGroup.get('c4') as FormControl;
+
+        expect(arrayFirstChildGroupFirstChildCtrl.dirty).toBe(true);
+      });
+
+      it('should not emit events when `FormGroup.markAllAsDirty` is called with `emitEvent: false`', () => {
+        form.valueChanges.subscribe(() => logger.push('form'));
+        form.markAllAsDirty({emitEvent: false});
+        expect(logger).toEqual([]);
+      });
+    });
+
     describe('markAllAsTouched', () => {
-      it('should mark all descendants as touched', () => {
-        const formGroup: FormGroup = new FormGroup({
+      let form: FormGroup;
+      let logger: any[];
+
+      beforeEach(() => {
+        form = new FormGroup({
           'c1': new FormControl('v1'),
           'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
           'array': new FormArray([
@@ -93,24 +170,27 @@ import {FormControlStatus, StatusChangeEvent} from '../src/model/abstract_model'
             new FormGroup({'c4': new FormControl('v4')}),
           ]),
         });
+        logger = [];
+      });
 
-        expect(formGroup.touched).toBe(false);
+      it('should mark all descendants as touched', () => {
+        expect(form.touched).toBe(false);
 
-        const control1 = formGroup.get('c1') as FormControl;
+        const control1 = form.get('c1') as FormControl;
 
         expect(control1.touched).toBe(false);
 
-        const innerGroup = formGroup.get('group') as FormGroup;
+        const innerGroup = form.get('group') as FormGroup;
 
         expect(innerGroup.touched).toBe(false);
 
         const innerGroupFirstChildCtrl = innerGroup.get('c2') as FormControl;
 
         expect(innerGroupFirstChildCtrl.touched).toBe(false);
 
-        formGroup.markAllAsTouched();
+        form.markAllAsTouched();
 
-        expect(formGroup.touched).toBe(true);
+        expect(form.touched).toBe(true);
 
         expect(control1.touched).toBe(true);
 
@@ -122,7 +202,7 @@ import {FormControlStatus, StatusChangeEvent} from '../src/model/abstract_model'
 
         expect(innerGroupSecondChildCtrl.touched).toBe(true);
 
-        const array = formGroup.get('array') as FormArray;
+        const array = form.get('array') as FormArray;
 
         expect(array.touched).toBe(true);
 
@@ -142,6 +222,12 @@ import {FormControlStatus, StatusChangeEvent} from '../src/model/abstract_model'
 
         expect(arrayFirstChildGroupFirstChildCtrl.touched).toBe(true);
       });
+
+      it('should not emit events when `FormGroup.markAllAsTouched` is called with `emitEvent: false`', () => {
+        form.valueChanges.subscribe(() => logger.push('form'));
+        form.markAllAsTouched({emitEvent: false});
+        expect(logger).toEqual([]);
+      });
     });
 
     describe('adding and removing controls', () => {
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
@@ -1390,6 +1390,8 @@ describe('reactive forms integration tests', () => {
       expect(fcEvents.length).toBe(0);
       fc.markAsTouched({emitEvent: false});
       expect(fcEvents.length).toBe(0);
+      fc.markAllAsDirty({emitEvent: false});
+      expect(fcEvents.length).toBe(0);
       fc.markAllAsTouched({emitEvent: false});
       expect(fcEvents.length).toBe(0);
       fc.markAsUntouched({emitEvent: false});
