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[]>;