From 170885c51b6741cc21118317f277d9cf18168b47 Mon Sep 17 00:00:00 2001
From: Oussama Ben Brahim <benbraou@gmail.com>
Date: Sat, 9 Dec 2017 19:17:49 +0100
Subject: [PATCH] fix(forms): allow FormBuilder to create controls with any
 formState type (#20917)

Align formState type in FormBuilder#control with FormControl#constructor

Fixes #20368

PR Close #20917
---
 packages/forms/src/form_builder.ts       |  2 +-
 packages/forms/test/form_builder_spec.ts | 37 ++++++++++++++++++++++--
 tools/public_api_guard/forms/forms.d.ts  |  2 +-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/forms/src/form_builder.ts b/packages/forms/src/form_builder.ts
index b10797c04d..4a34a7ab6b 100644
--- a/packages/forms/src/form_builder.ts
+++ b/packages/forms/src/form_builder.ts
@@ -54,7 +54,7 @@ export class FormBuilder {
    *
    */
   control(
-      formState: Object, validator?: ValidatorFn|ValidatorFn[]|null,
+      formState: any, validator?: ValidatorFn|ValidatorFn[]|null,
       asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null): FormControl {
     return new FormControl(formState, validator, asyncValidator);
   }
diff --git a/packages/forms/test/form_builder_spec.ts b/packages/forms/test/form_builder_spec.ts
index 1a2ecea2c0..e86cb74a07 100644
--- a/packages/forms/test/form_builder_spec.ts
+++ b/packages/forms/test/form_builder_spec.ts
@@ -41,7 +41,7 @@ import {FormBuilder} from '@angular/forms';
       expect(g.controls['password'].asyncValidator).toEqual(asyncValidator);
     });
 
-    it('should use controls', () => {
+    it('should use controls whose form state is a standalone value', () => {
       const g = b.group({'login': b.control('some value', syncValidator, asyncValidator)});
 
       expect(g.controls['login'].value).toEqual('some value');
@@ -49,6 +49,34 @@ import {FormBuilder} from '@angular/forms';
       expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
     });
 
+    it('should support controls with no validators and whose form state is null', () => {
+      const g = b.group({'login': b.control(null)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBeNull();
+      expect(g.controls['login'].asyncValidator).toBeNull();
+    });
+
+    it('should support controls with validators and whose form state is null', () => {
+      const g = b.group({'login': b.control(null, syncValidator, asyncValidator)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBe(syncValidator);
+      expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
+    });
+
+    it('should support controls with no validators and whose form state is undefined', () => {
+      const g = b.group({'login': b.control(undefined)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBeNull();
+      expect(g.controls['login'].asyncValidator).toBeNull();
+    });
+
+    it('should support controls with validators and whose form state is undefined', () => {
+      const g = b.group({'login': b.control(undefined, syncValidator, asyncValidator)});
+      expect(g.controls['login'].value).toBeNull();
+      expect(g.controls['login'].validator).toBe(syncValidator);
+      expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
+    });
+
     it('should create groups with a custom validator', () => {
       const g = b.group(
           {'login': 'some value'}, {'validator': syncValidator, 'asyncValidator': asyncValidator});
@@ -59,10 +87,13 @@ import {FormBuilder} from '@angular/forms';
 
     it('should create control arrays', () => {
       const c = b.control('three');
+      const e = b.control(null);
+      const f = b.control(undefined);
       const a = b.array(
-          ['one', ['two', syncValidator], c, b.array(['four'])], syncValidator, asyncValidator);
+          ['one', ['two', syncValidator], c, b.array(['four']), e, f], syncValidator,
+          asyncValidator);
 
-      expect(a.value).toEqual(['one', 'two', 'three', ['four']]);
+      expect(a.value).toEqual(['one', 'two', 'three', ['four'], null, null]);
       expect(a.validator).toBe(syncValidator);
       expect(a.asyncValidator).toBe(asyncValidator);
     });
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index cb797f5285..a3e676d08e 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -211,7 +211,7 @@ export declare class FormArrayName extends ControlContainer implements OnInit, O
 /** @stable */
 export declare class FormBuilder {
     array(controlsConfig: any[], validator?: ValidatorFn | null, asyncValidator?: AsyncValidatorFn | null): FormArray;
-    control(formState: Object, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
+    control(formState: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
     group(controlsConfig: {
         [key: string]: any;
     }, extra?: {