fix(forms): mark control containers as touched when child controls are touched (#9735)

modules/@angular/forms/src/model.ts

@@ -120,7 +120,14 @@ export abstract class AbstractControl {
 
   clearValidators(): void { this.validator = null; }
 
-  markAsTouched(): void { this._touched = true; }
+  markAsTouched({onlySelf}: {onlySelf?: boolean} = {}): void {
+    onlySelf = normalizeBool(onlySelf);
+    this._touched = true;
+
+    if (isPresent(this._parent) && !onlySelf) {
+      this._parent.markAsTouched({onlySelf: onlySelf});
+    }
+  }
 
   markAsDirty({onlySelf}: {onlySelf?: boolean} = {}): void {
     onlySelf = normalizeBool(onlySelf);

modules/@angular/forms/test/model_spec.ts

@@ -231,17 +231,30 @@ export function main() {
 
       describe('dirty', () => {
         it('should be false after creating a control', () => {
-          var c = new FormControl('value');
+          const c = new FormControl('value');
           expect(c.dirty).toEqual(false);
         });
 
         it('should be true after changing the value of the control', () => {
-          var c = new FormControl('value');
+          const c = new FormControl('value');
           c.markAsDirty();
           expect(c.dirty).toEqual(true);
         });
       });
 
+      describe('touched', () => {
+        it('should be false after creating a control', () => {
+          const c = new FormControl('value');
+          expect(c.touched).toEqual(false);
+        });
+
+        it('should be true after markAsTouched runs', () => {
+          const c = new FormControl('value');
+          c.markAsTouched();
+          expect(c.touched).toEqual(true);
+        });
+      });
+
       describe('updateValue', () => {
         var g: any /** TODO #9100 */, c: any /** TODO #9100 */;
         beforeEach(() => {
@@ -504,7 +517,7 @@ export function main() {
       });
 
       describe('dirty', () => {
-        var c: any /** TODO #9100 */, g: any /** TODO #9100 */;
+        var c: FormControl, g: FormGroup;
 
         beforeEach(() => {
           c = new FormControl('value');
@@ -513,13 +526,31 @@ export function main() {
 
         it('should be false after creating a control', () => { expect(g.dirty).toEqual(false); });
 
-        it('should be false after changing the value of the control', () => {
+        it('should be true after changing the value of the control', () => {
           c.markAsDirty();
 
           expect(g.dirty).toEqual(true);
         });
       });
 
+
+      describe('touched', () => {
+        var c: FormControl, g: FormGroup;
+
+        beforeEach(() => {
+          c = new FormControl('value');
+          g = new FormGroup({'one': c});
+        });
+
+        it('should be false after creating a control', () => { expect(g.touched).toEqual(false); });
+
+        it('should be true after control is marked as touched', () => {
+          c.markAsTouched();
+
+          expect(g.touched).toEqual(true);
+        });
+      });
+
       describe('optional components', () => {
         describe('contains', () => {
           var group: any /** TODO #9100 */;
@@ -817,13 +848,32 @@ export function main() {
 
         it('should be false after creating a control', () => { expect(a.dirty).toEqual(false); });
 
-        it('should be false after changing the value of the control', () => {
+        it('should be true after changing the value of the control', () => {
           c.markAsDirty();
 
           expect(a.dirty).toEqual(true);
         });
       });
 
+      describe('touched', () => {
+        var c: FormControl;
+        var a: FormArray;
+
+        beforeEach(() => {
+          c = new FormControl('value');
+          a = new FormArray([c]);
+        });
+
+        it('should be false after creating a control', () => { expect(a.touched).toEqual(false); });
+
+        it('should be true after child control is marked as touched', () => {
+          c.markAsTouched();
+
+          expect(a.touched).toEqual(true);
+        });
+      });
+
+
       describe('pending', () => {
         var c: FormControl;
         var a: FormArray;

tools/public_api_guard/forms/index.d.ts

@@ -28,7 +28,9 @@ export declare abstract class AbstractControl {
     markAsPending({onlySelf}?: {
         onlySelf?: boolean;
     }): void;
-    markAsTouched(): void;
+    markAsTouched({onlySelf}?: {
+        onlySelf?: boolean;
+    }): void;
     setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[]): void;
     setErrors(errors: {
         [key: string]: any;