refactor(multiple): switch docs and tests to typed forms (#24777)

Now that typed forms are available, we can switch all of the docs examples and tests to them.

Author: crisbeto

package.json

@@ -54,12 +54,12 @@
   },
   "version": "14.0.0-next.10",
   "dependencies": {
-    "@angular/animations": "14.0.0-next.9",
-    "@angular/common": "14.0.0-next.9",
-    "@angular/compiler": "14.0.0-next.9",
-    "@angular/core": "14.0.0-next.9",
-    "@angular/forms": "14.0.0-next.9",
-    "@angular/platform-browser": "14.0.0-next.9",
+    "@angular/animations": "14.0.0-next.13",
+    "@angular/common": "14.0.0-next.13",
+    "@angular/compiler": "14.0.0-next.13",
+    "@angular/core": "14.0.0-next.13",
+    "@angular/forms": "14.0.0-next.13",
+    "@angular/platform-browser": "14.0.0-next.13",
     "@types/google.maps": "^3.47.3",
     "@types/youtube": "^0.0.46",
     "rxjs": "^6.6.7",
@@ -68,17 +68,17 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.0.0-next.6",
-    "@angular-devkit/core": "14.0.0-next.6",
-    "@angular-devkit/schematics": "14.0.0-next.6",
+    "@angular-devkit/build-angular": "14.0.0-next.9",
+    "@angular-devkit/core": "14.0.0-next.9",
+    "@angular-devkit/schematics": "14.0.0-next.9",
     "@angular/bazel": "14.0.0-next.9",
-    "@angular/cli": "14.0.0-next.6",
-    "@angular/compiler-cli": "14.0.0-next.9",
+    "@angular/cli": "14.0.0-next.9",
+    "@angular/compiler-cli": "14.0.0-next.13",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#4859d1eb3ae2e20646a16f271a39bc02965cbe00",
-    "@angular/localize": "14.0.0-next.9",
-    "@angular/platform-browser-dynamic": "14.0.0-next.9",
-    "@angular/platform-server": "14.0.0-next.9",
-    "@angular/router": "14.0.0-next.9",
+    "@angular/localize": "14.0.0-next.13",
+    "@angular/platform-browser-dynamic": "14.0.0-next.13",
+    "@angular/platform-server": "14.0.0-next.13",
+    "@angular/router": "14.0.0-next.13",
     "@axe-core/webdriverjs": "^4.3.2",
     "@babel/core": "^7.16.12",
     "@bazel/bazelisk": "~1.11.0",
@@ -143,7 +143,7 @@
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@schematics/angular": "14.0.0-next.6",
+    "@schematics/angular": "14.0.0-next.9",
     "@types/babel__core": "^7.1.18",
     "@types/browser-sync": "^2.26.3",
     "@types/fs-extra": "^9.0.13",

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 {UntypedFormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, 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 UntypedFormControl();
+  form = new FormControl<string[]>([]);
   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 {UntypedFormControl} from '@angular/forms';
+import {FormControl} 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 UntypedFormControl();
+  numberControl = new FormControl<number | null>(null);
 
   @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 {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
+import {FormBuilder, Validators} from '@angular/forms';
 
 /** @title A custom CDK linear stepper with forms */
 @Component({
@@ -10,17 +10,14 @@ import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 })
 export class CdkLinearStepperWithFormExample {
   isLinear = true;
-  firstFormGroup: UntypedFormGroup;
-  secondFormGroup: UntypedFormGroup;
+  firstFormGroup = this._formBuilder.group({
+    firstControl: ['', Validators.required],
+  });
+  secondFormGroup = this._formBuilder.group({
+    secondControl: ['', Validators.required],
+  });
 
-  constructor(private readonly _formBuilder: UntypedFormBuilder) {
-    this.firstFormGroup = this._formBuilder.group({
-      firstControl: ['', Validators.required],
-    });
-    this.secondFormGroup = this._formBuilder.group({
-      secondControl: ['', Validators.required],
-    });
-  }
+  constructor(private readonly _formBuilder: FormBuilder) {}
 
   toggleLinearity() {
     this.isLinear = !this.isLinear;

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

@@ -1,13 +1,7 @@
 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,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  NgControl,
-  Validators,
-} from '@angular/forms';
+import {ControlValueAccessor, FormBuilder, 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';
@@ -38,7 +32,11 @@ export class MyTel {
 export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
 
-  parts: UntypedFormGroup;
+  parts = this._formBuilder.group({
+    area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+    exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+    subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
+  });
   stateChanges = new Subject<void>();
   focused = false;
   errorState = false;
@@ -98,7 +96,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
       const {
         value: {area, exchange, subscriber},
       } = this.parts;
-      return new MyTel(area, exchange, subscriber);
+      return new MyTel(area!, exchange!, subscriber!);
     }
     return null;
   }
@@ -109,18 +107,12 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   }
 
   constructor(
-    formBuilder: UntypedFormBuilder,
+    private _formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
     @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
     @Optional() @Self() public ngControl: NgControl,
   ) {
-    this.parts = formBuilder.group({
-      area: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      exchange: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      subscriber: [null, [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
-    });
-
     _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
       if (this.focused && !origin) {
         this.onTouched();

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 {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -12,14 +12,14 @@ import {map, startWith} from 'rxjs/operators';
   styleUrls: ['autocomplete-auto-active-first-option-example.css'],
 })
 export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
-  myControl = new UntypedFormControl();
+  myControl = new FormControl('');
   options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value)),
+      map(value => this._filter(value || '')),
     );
   }
 

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

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

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

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

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {FormBuilder} 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: UntypedFormGroup = this._formBuilder.group({
+  stateForm = this._formBuilder.group({
     stateGroup: '',
   });
 
@@ -125,12 +125,12 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private _formBuilder: UntypedFormBuilder) {}
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe(
       startWith(''),
-      map(value => this._filterGroup(value)),
+      map(value => this._filterGroup(value || '')),
     );
   }
 

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

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

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 
 /**
  * @title Simple autocomplete
@@ -10,6 +10,6 @@ import {UntypedFormControl} from '@angular/forms';
   styleUrls: ['autocomplete-simple-example.css'],
 })
 export class AutocompleteSimpleExample {
-  myControl = new UntypedFormControl();
+  myControl = new FormControl('');
   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 {UntypedFormControl} from '@angular/forms';
+import {FormControl} from '@angular/forms';
 
 /**
  * @title Button-toggles with forms
@@ -9,6 +9,6 @@ import {UntypedFormControl} from '@angular/forms';
   templateUrl: 'button-toggle-forms-example.html',
 })
 export class ButtonToggleFormsExample {
-  fontStyleControl = new UntypedFormControl();
+  fontStyleControl = new FormControl('');
   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 {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {FormBuilder} from '@angular/forms';
 
 /** @title Checkboxes with reactive forms */
 @Component({
@@ -8,13 +8,11 @@ import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
   styleUrls: ['checkbox-reactive-forms-example.css'],
 })
 export class CheckboxReactiveFormsExample {
-  toppings: UntypedFormGroup;
+  toppings = this._formBuilder.group({
+    pepperoni: false,
+    extracheese: false,
+    mushroom: false,
+  });
 
-  constructor(fb: UntypedFormBuilder) {
-    this.toppings = fb.group({
-      pepperoni: false,
-      extracheese: false,
-      mushroom: false,
-    });
-  }
+  constructor(private _formBuilder: FormBuilder) {}
 }

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 {UntypedFormControl} from '@angular/forms';
+import {FormControl} 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 UntypedFormControl();
+  fruitCtrl = new FormControl('');
   filteredFruits: Observable<string[]>;
   fruits: string[] = ['Lemon'];
   allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];