Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(forms): add markAllAsTouched() to AbstractControl
Add functionality to mark a control and its descendant controls as touched

Closes #19400
  • Loading branch information
alsami committed Nov 12, 2018
1 parent 95993e1 commit 7a29a6e
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/forms/src/model.ts
Expand Up @@ -354,6 +354,16 @@ export abstract class AbstractControl {
}
}

/**
* Marks the control and all its descendant controls as `touched`.
* See also @function markAsTouched
*/
markAllAsTouched(): void {
this.markAsTouched({onlySelf: true});

this._forEachChild((control: AbstractControl) => control.markAllAsTouched());
}

/**
* Marks the control as `untouched`.
*
Expand Down
61 changes: 61 additions & 0 deletions packages/forms/test/form_group_spec.ts
Expand Up @@ -86,6 +86,67 @@ import {of } from 'rxjs';

});

describe('markAllAsTouched', () => {
it('should mark all descendants as touched', () => {
const formGroup: FormGroup = new FormGroup({
'c1': new FormControl('v1'),
'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
'array': new FormArray([
new FormControl('v4'), new FormControl('v5'),
new FormGroup({'c4': new FormControl('v4')})
])
});

expect(formGroup.touched).toBe(false);

const control1 = formGroup.get('c1') as FormControl;

expect(control1.touched).toBe(false);

const innerGroup = formGroup.get('group') as FormGroup;

expect(innerGroup.touched).toBe(false);

const innerGroupFirstChildCtrl = innerGroup.get('c2') as FormControl;

expect(innerGroupFirstChildCtrl.touched).toBe(false);

formGroup.markAllAsTouched();

expect(formGroup.touched).toBe(true);

expect(control1.touched).toBe(true);

expect(innerGroup.touched).toBe(true);

expect(innerGroupFirstChildCtrl.touched).toBe(true);

const innerGroupSecondChildCtrl = innerGroup.get('c3') as FormControl;

expect(innerGroupSecondChildCtrl.touched).toBe(true);

const array = formGroup.get('array') as FormArray;

expect(array.touched).toBe(true);

const arrayFirstChildCtrl = array.controls[0] as FormControl;

expect(arrayFirstChildCtrl.touched).toBe(true);

const arraySecondChildCtrl = array.controls[1] as FormControl;

expect(arraySecondChildCtrl.touched).toBe(true);

const arrayFirstChildGroup = array.controls[2] as FormGroup;

expect(arrayFirstChildGroup.touched).toBe(true);

const arrayFirstChildGroupFirstChildCtrl = arrayFirstChildGroup.get('c4') as FormControl;

expect(arrayFirstChildGroupFirstChildCtrl.touched).toBe(true);
});
});

describe('adding and removing controls', () => {
it('should update value and validity when control is added', () => {
const g = new FormGroup({'one': new FormControl('1')});
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/forms/forms.d.ts
Expand Up @@ -45,6 +45,7 @@ export declare abstract class AbstractControl {
markAsTouched(opts?: {
onlySelf?: boolean;
}): void;
markAllAsTouched(): void;
markAsUntouched(opts?: {
onlySelf?: boolean;
}): void;
Expand Down

0 comments on commit 7a29a6e

Please sign in to comment.