refactor(multiple): run typed forms migration (#24698)

Runs the typed forms migration over all our code.

Author: crisbeto

src/cdk-experimental/listbox/listbox.spec.ts

@@ -8,7 +8,7 @@ import {
   dispatchMouseEvent,
 } from '../../cdk/testing/private';
 import {A, DOWN_ARROW, END, HOME, SPACE} from '@angular/cdk/keycodes';
-import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {UntypedFormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CdkCombobox, CdkComboboxModule} from '@angular/cdk-experimental/combobox';
 
 describe('CdkOption and CdkListbox', () => {
@@ -967,7 +967,7 @@ class ListboxActiveDescendant {
     </select>`,
 })
 class ListboxControlValueAccessor {
-  form = new FormControl();
+  form = new UntypedFormControl();
   changedOption: CdkOption<string>;
   isDisabled: boolean = false;
   isMultiselectable: boolean = false;

src/cdk/testing/tests/test-main-component.ts

@@ -8,7 +8,7 @@
 
 import {ENTER} from '@angular/cdk/keycodes';
 import {_supportsShadowDom} from '@angular/cdk/platform';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -47,7 +47,7 @@ export class TestMainComponent implements OnDestroy {
   _shadowDomSupported = _supportsShadowDom();
   clickResult = {x: -1, y: -1};
   rightClickResult = {x: -1, y: -1, button: -1};
-  numberControl = new FormControl();
+  numberControl = new UntypedFormControl();
 
   @ViewChild('clickTestElement') clickTestElement: ElementRef<HTMLElement>;
   @ViewChild('taskStateResult') taskStateResultElement: ElementRef<HTMLElement>;

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {CdkStepper} from '@angular/cdk/stepper';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 
 /** @title A custom CDK linear stepper with forms */
 @Component({
@@ -10,10 +10,10 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class CdkLinearStepperWithFormExample {
   isLinear = true;
-  firstFormGroup: FormGroup;
-  secondFormGroup: FormGroup;
+  firstFormGroup: UntypedFormGroup;
+  secondFormGroup: UntypedFormGroup;
 
-  constructor(private readonly _formBuilder: FormBuilder) {
+  constructor(private readonly _formBuilder: UntypedFormBuilder) {
     this.firstFormGroup = this._formBuilder.group({
       firstControl: ['', Validators.required],
     });

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.ts

@@ -1,7 +1,13 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Inject, Input, OnDestroy, Optional, Self} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NgControl, Validators} from '@angular/forms';
+import {
+  ControlValueAccessor,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  NgControl,
+  Validators,
+} from '@angular/forms';
 import {MatFormField, MatFormFieldControl} from '@angular/material-experimental/mdc-form-field';
 import {MAT_FORM_FIELD} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
@@ -32,7 +38,7 @@ export class MyTel {
 export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
 
-  parts: FormGroup;
+  parts: UntypedFormGroup;
   stateChanges = new Subject<void>();
   focused = false;
   errorState = false;
@@ -103,7 +109,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   }
 
   constructor(
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
     @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -12,7 +12,7 @@ import {map, startWith} from 'rxjs/operators';
   styleUrls: ['autocomplete-auto-active-first-option-example.css'],
 })
 export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
-  myControl = new FormControl();
+  myControl = new UntypedFormControl();
   options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 

src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -16,7 +16,7 @@ export interface User {
   styleUrls: ['autocomplete-display-example.css'],
 })
 export class AutocompleteDisplayExample implements OnInit {
-  myControl = new FormControl();
+  myControl = new UntypedFormControl();
   options: User[] = [{name: 'Mary'}, {name: 'Shelley'}, {name: 'Igor'}];
   filteredOptions: Observable<User[]>;
 

src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -12,7 +12,7 @@ import {map, startWith} from 'rxjs/operators';
   styleUrls: ['autocomplete-filter-example.css'],
 })
 export class AutocompleteFilterExample implements OnInit {
-  myControl = new FormControl();
+  myControl = new UntypedFormControl();
   options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 

src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
 
@@ -22,7 +22,7 @@ export const _filter = (opt: string[], value: string): string[] => {
   templateUrl: 'autocomplete-optgroup-example.html',
 })
 export class AutocompleteOptgroupExample implements OnInit {
-  stateForm: FormGroup = this._formBuilder.group({
+  stateForm: UntypedFormGroup = this._formBuilder.group({
     stateGroup: '',
   });
 
@@ -125,7 +125,7 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private _formBuilder: FormBuilder) {}
+  constructor(private _formBuilder: UntypedFormBuilder) {}
 
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe(

src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -18,7 +18,7 @@ export interface State {
   styleUrls: ['autocomplete-overview-example.css'],
 })
 export class AutocompleteOverviewExample {
-  stateCtrl = new FormControl();
+  stateCtrl = new UntypedFormControl();
   filteredStates: Observable<State[]>;
 
   states: State[] = [

src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
 
@@ -12,7 +12,7 @@ import {startWith, map} from 'rxjs/operators';
   styleUrls: ['autocomplete-plain-input-example.css'],
 })
 export class AutocompletePlainInputExample implements OnInit {
-  control = new FormControl();
+  control = new UntypedFormControl();
   streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
   filteredStreets: Observable<string[]>;
 

src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 
 /**
  * @title Simple autocomplete
@@ -10,6 +10,6 @@ import {FormControl} from '@angular/forms';
   styleUrls: ['autocomplete-simple-example.css'],
 })
 export class AutocompleteSimpleExample {
-  myControl = new FormControl();
+  myControl = new UntypedFormControl();
   options: string[] = ['One', 'Two', 'Three'];
 }

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 
 /**
  * @title Button-toggles with forms
@@ -9,6 +9,6 @@ import {FormControl} from '@angular/forms';
   templateUrl: 'button-toggle-forms-example.html',
 })
 export class ButtonToggleFormsExample {
-  fontStyleControl = new FormControl();
+  fontStyleControl = new UntypedFormControl();
   fontStyle?: string;
 }

src/components-examples/material/checkbox/checkbox-reactive-forms/checkbox-reactive-forms-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 
 /** @title Checkboxes with reactive forms */
 @Component({
@@ -8,9 +8,9 @@ import {FormBuilder, FormGroup} from '@angular/forms';
   styleUrls: ['checkbox-reactive-forms-example.css'],
 })
 export class CheckboxReactiveFormsExample {
-  toppings: FormGroup;
+  toppings: UntypedFormGroup;
 
-  constructor(fb: FormBuilder) {
+  constructor(fb: UntypedFormBuilder) {
     this.toppings = fb.group({
       pepperoni: false,
       extracheese: false,

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts

@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {Observable} from 'rxjs';
@@ -16,7 +16,7 @@ import {map, startWith} from 'rxjs/operators';
 })
 export class ChipsAutocompleteExample {
   separatorKeysCodes: number[] = [ENTER, COMMA];
-  fruitCtrl = new FormControl();
+  fruitCtrl = new UntypedFormControl();
   filteredFruits: Observable<string[]>;
   fruits: string[] = ['Lemon'];
   allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {MatChipInputEvent} from '@angular/material/chips';
 
 /**
@@ -12,7 +12,7 @@ import {MatChipInputEvent} from '@angular/material/chips';
 })
 export class ChipsFormControlExample {
   keywords = new Set(['angular', 'how-to', 'tutorial']);
-  formControl = new FormControl(['angular']);
+  formControl = new UntypedFormControl(['angular']);
 
   addKeywordFromInput(event: MatChipInputEvent) {
     if (event.value) {

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormGroup, FormControl} from '@angular/forms';
+import {UntypedFormGroup, UntypedFormControl} from '@angular/forms';
 
 /** @title Date range picker comparison ranges */
 @Component({
@@ -8,22 +8,22 @@ import {FormGroup, FormControl} from '@angular/forms';
   styleUrls: ['date-range-picker-comparison-example.css'],
 })
 export class DateRangePickerComparisonExample {
-  campaignOne: FormGroup;
-  campaignTwo: FormGroup;
+  campaignOne: UntypedFormGroup;
+  campaignTwo: UntypedFormGroup;
 
   constructor() {
     const today = new Date();
     const month = today.getMonth();
     const year = today.getFullYear();
 
-    this.campaignOne = new FormGroup({
-      start: new FormControl(new Date(year, month, 13)),
-      end: new FormControl(new Date(year, month, 16)),
+    this.campaignOne = new UntypedFormGroup({
+      start: new UntypedFormControl(new Date(year, month, 13)),
+      end: new UntypedFormControl(new Date(year, month, 16)),
     });
 
-    this.campaignTwo = new FormGroup({
-      start: new FormControl(new Date(year, month, 15)),
-      end: new FormControl(new Date(year, month, 19)),
+    this.campaignTwo = new UntypedFormGroup({
+      start: new UntypedFormControl(new Date(year, month, 15)),
+      end: new UntypedFormControl(new Date(year, month, 19)),
     });
   }
 }

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts

@@ -1,14 +1,14 @@
 import {Component} from '@angular/core';
-import {FormGroup, FormControl} from '@angular/forms';
+import {UntypedFormGroup, UntypedFormControl} from '@angular/forms';
 
 /** @title Date range picker forms integration */
 @Component({
   selector: 'date-range-picker-forms-example',
   templateUrl: 'date-range-picker-forms-example.html',
 })
 export class DateRangePickerFormsExample {
-  range = new FormGroup({
-    start: new FormControl(),
-    end: new FormControl(),
+  range = new UntypedFormGroup({
+    start: new UntypedFormControl(),
+    end: new UntypedFormControl(),
   });
 }

src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 
@@ -45,5 +45,5 @@ export const MY_FORMATS = {
   ],
 })
 export class DatepickerFormatsExample {
-  date = new FormControl(moment());
+  date = new UntypedFormControl(moment());
 }

src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 
@@ -27,5 +27,5 @@ const moment = _rollupMoment || _moment;
 })
 export class DatepickerMomentExample {
   // Datepicker takes `Moment` objects instead of `Date` objects.
-  date = new FormControl(moment([2017, 0, 1]));
+  date = new UntypedFormControl(moment([2017, 0, 1]));
 }

src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 
 /** @title Datepicker selected value */
 @Component({
@@ -8,6 +8,6 @@ import {FormControl} from '@angular/forms';
   styleUrls: ['datepicker-value-example.css'],
 })
 export class DatepickerValueExample {
-  date = new FormControl(new Date());
-  serializedDate = new FormControl(new Date().toISOString());
+  date = new UntypedFormControl(new Date());
+  serializedDate = new UntypedFormControl(new Date().toISOString());
 }

src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 import {MatDatepicker} from '@angular/material/datepicker';
@@ -47,7 +47,7 @@ export const MY_FORMATS = {
   ],
 })
 export class DatepickerViewsSelectionExample {
-  date = new FormControl(moment());
+  date = new UntypedFormControl(moment());
 
   setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
     const ctrlValue = this.date.value;