Switch form field and select examples to MDC

src/components-examples/material/form-field/BUILD.bazel

@@ -17,13 +17,13 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/form-field/testing",
         "//src/material/icon",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-form-field/testing",
-        "//src/material/legacy-input",
-        "//src/material/legacy-input/testing",
-        "//src/material/legacy-select",
+        "//src/material/input",
+        "//src/material/input/testing",
         "//src/material/radio",
+        "//src/material/select",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -47,10 +47,10 @@ ng_test_library(
         ":form-field",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-form-field/testing",
-        "//src/material/legacy-input",
-        "//src/material/legacy-input/testing",
+        "//src/material/form-field",
+        "//src/material/form-field/testing",
+        "//src/material/input",
+        "//src/material/input/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material/form-field/form-field-appearance/form-field-appearance-example.html

@@ -1,19 +1,3 @@
-<p>
-  <mat-form-field appearance="legacy">
-    <mat-label>Legacy form field</mat-label>
-    <input matInput placeholder="Placeholder">
-    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
-    <mat-hint>Hint</mat-hint>
-  </mat-form-field>
-</p>
-<p>
-  <mat-form-field appearance="standard">
-    <mat-label>Standard form field</mat-label>
-    <input matInput placeholder="Placeholder">
-    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
-    <mat-hint>Hint</mat-hint>
-  </mat-form-field>
-</p>
 <p>
   <mat-form-field appearance="fill">
     <mat-label>Fill form field</mat-label>

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

@@ -19,11 +19,7 @@ import {
   NgControl,
   Validators,
 } from '@angular/forms';
-import {
-  MAT_FORM_FIELD,
-  MatLegacyFormField,
-  MatLegacyFormFieldControl,
-} from '@angular/material/legacy-form-field';
+import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
@@ -47,15 +43,13 @@ export class MyTel {
   selector: 'example-tel-input',
   templateUrl: 'example-tel-input-example.html',
   styleUrls: ['example-tel-input-example.css'],
-  providers: [{provide: MatLegacyFormFieldControl, useExisting: MyTelInput}],
+  providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
   host: {
     '[class.example-floating]': 'shouldLabelFloat',
     '[id]': 'id',
   },
 })
-export class MyTelInput
-  implements ControlValueAccessor, MatLegacyFormFieldControl<MyTel>, OnDestroy
-{
+export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
   @ViewChild('area') areaInput: HTMLInputElement;
   @ViewChild('exchange') exchangeInput: HTMLInputElement;
@@ -143,7 +137,7 @@ export class MyTelInput
     private _formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
-    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatLegacyFormField,
+    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
     @Optional() @Self() public ngControl: NgControl,
   ) {
     if (this.ngControl != null) {

src/components-examples/material/form-field/form-field-error/form-field-error-example.css

@@ -1,3 +1,3 @@
-.example-container .mat-form-field + .mat-form-field {
+.example-container mat-form-field + mat-form-field {
   margin-left: 8px;
 }

src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts

@@ -1,26 +1,21 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacyFormFieldHarness} from '@angular/material/legacy-form-field/testing';
+import {MatFormFieldHarness} from '@angular/material/form-field/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormFieldHarnessExample} from './form-field-harness-example';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing';
+import {MatInputHarness} from '@angular/material/input/testing';
 
 describe('FormFieldHarnessExample', () => {
   let fixture: ComponentFixture<FormFieldHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        MatLegacyFormFieldModule,
-        MatLegacyInputModule,
-        ReactiveFormsModule,
-        NoopAnimationsModule,
-      ],
+      imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NoopAnimationsModule],
       declarations: [FormFieldHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(FormFieldHarnessExample);
@@ -29,28 +24,28 @@ describe('FormFieldHarnessExample', () => {
   });
 
   it('should be able to load harnesses', async () => {
-    const formFields = await loader.getAllHarnesses(MatLegacyFormFieldHarness);
+    const formFields = await loader.getAllHarnesses(MatFormFieldHarness);
     expect(formFields.length).toBe(1);
   });
 
   it('should be able to get control of form-field', async () => {
-    const formField = await loader.getHarness(MatLegacyFormFieldHarness);
-    expect((await formField.getControl()) instanceof MatLegacyInputHarness).toBe(true);
+    const formField = await loader.getHarness(MatFormFieldHarness);
+    expect((await formField.getControl()) instanceof MatInputHarness).toBe(true);
   });
 
   it('should be able to get error messages and hints of form-field', async () => {
-    const formField = await loader.getHarness(MatLegacyFormFieldHarness);
+    const formField = await loader.getHarness(MatFormFieldHarness);
     expect(await formField.getTextErrors()).toEqual([]);
     expect(await formField.getTextHints()).toEqual(['Hint']);
 
     fixture.componentInstance.requiredControl.setValue('');
-    await ((await formField.getControl()) as MatLegacyInputHarness)?.blur();
+    await ((await formField.getControl()) as MatInputHarness)?.blur();
     expect(await formField.getTextErrors()).toEqual(['Error']);
     expect(await formField.getTextHints()).toEqual([]);
   });
 
   it('should be able to check if form field is invalid', async () => {
-    const formField = await loader.getHarness(MatLegacyFormFieldHarness);
+    const formField = await loader.getHarness(MatFormFieldHarness);
     expect(await formField.isControlValid()).toBe(true);
 
     fixture.componentInstance.requiredControl.setValue('');

src/components-examples/material/form-field/form-field-hint/form-field-hint-example.css

@@ -1,3 +1,3 @@
-.example-container .mat-form-field + .mat-form-field {
+.example-container mat-form-field + mat-form-field {
   margin-left: 8px;
 }

src/components-examples/material/form-field/form-field-label/form-field-label-example.css

@@ -1,8 +1,8 @@
-.example-container .mat-form-field + .mat-form-field {
+.example-container mat-form-field + mat-form-field {
   margin-left: 8px;
 }
 
-.example-container .mat-form-field {
+.example-container mat-form-field {
   width: 220px;
 }
 
@@ -11,9 +11,14 @@
 }
 
 .example-container form > * {
-  margin: 5px 0;
+  margin: 12px 0;
 }
 
 .example-container .mat-radio-button {
   margin: 0 12px;
 }
+
+.example-form-fields {
+  display: flex;
+  align-items: flex-start;
+}

src/components-examples/material/form-field/form-field-label/form-field-label-example.html

@@ -9,25 +9,27 @@
       </mat-radio-group>
     </div>
 
-    <mat-form-field appearance="fill"
-        [hideRequiredMarker]="hideRequiredControl.value"
-        [floatLabel]="getFloatLabelValue()">
-      <input matInput placeholder="Simple placeholder" required>
-    </mat-form-field>
+    <div class="example-form-fields">
+      <mat-form-field appearance="fill"
+          [hideRequiredMarker]="hideRequiredControl.value"
+          [floatLabel]="getFloatLabelValue()">
+        <input matInput placeholder="Simple placeholder" required>
+      </mat-form-field>
 
-    <mat-form-field appearance="fill" [floatLabel]="getFloatLabelValue()">
-      <mat-label>Both a label and a placeholder</mat-label>
-      <input matInput placeholder="Simple placeholder">
-    </mat-form-field>
+      <mat-form-field appearance="fill" [floatLabel]="getFloatLabelValue()">
+        <mat-label>Both a label and a placeholder</mat-label>
+        <input matInput placeholder="Simple placeholder">
+      </mat-form-field>
 
-    <mat-form-field appearance="fill"
-        [hideRequiredMarker]="hideRequiredControl.value"
-        [floatLabel]="getFloatLabelValue()">
-      <mat-select required>
-        <mat-option>-- None --</mat-option>
-        <mat-option value="option">Option</mat-option>
-      </mat-select>
-      <mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
-    </mat-form-field>
+      <mat-form-field appearance="fill"
+          [hideRequiredMarker]="hideRequiredControl.value"
+          [floatLabel]="getFloatLabelValue()">
+        <mat-select required>
+          <mat-option>-- None --</mat-option>
+          <mat-option value="option">Option</mat-option>
+        </mat-select>
+        <mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
+      </mat-form-field>
+    </div>
   </form>
 </div>

src/components-examples/material/form-field/form-field-label/form-field-label-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormBuilder, FormControl} from '@angular/forms';
-import {FloatLabelType} from '@angular/material/legacy-form-field';
+import {FloatLabelType} from '@angular/material/form-field';
 
 /** @title Form field with label */
 @Component({

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.css

@@ -1,4 +1,4 @@
-.example-container .mat-form-field + .mat-form-field {
+.example-container mat-form-field + mat-form-field {
   margin-left: 8px;
 }
 

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html

@@ -10,7 +10,7 @@
   <mat-form-field appearance="fill" floatLabel="always">
     <mat-label>Amount</mat-label>
     <input matInput type="number" class="example-right-align" placeholder="0">
-    <span matPrefix>$&nbsp;</span>
-    <span matSuffix>.00</span>
+    <span matTextPrefix>$&nbsp;</span>
+    <span matTextSuffix>.00</span>
   </mat-form-field>
 </div>

src/components-examples/material/form-field/form-field-theming/form-field-theming-example.css

@@ -1,3 +1,3 @@
-.example-container .mat-form-field + .mat-form-field {
+.example-container mat-form-field + mat-form-field {
   margin-left: 8px;
 }

src/components-examples/material/form-field/form-field-theming/form-field-theming-example.html

@@ -1,17 +1,17 @@
 <form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
-  <mat-form-field appearance="fill" [color]="colorControl.value">
+  <mat-form-field appearance="fill" [color]="options.value.color">
     <mat-label>Color</mat-label>
-    <mat-select [formControl]="colorControl">
+    <mat-select formControlName="color">
       <mat-option value="primary">Primary</mat-option>
       <mat-option value="accent">Accent</mat-option>
       <mat-option value="warn">Warn</mat-option>
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field appearance="fill" [color]="colorControl.value">
+  <mat-form-field appearance="fill" [color]="options.value.color">
     <mat-label>Font size</mat-label>
-    <input matInput type="number" placeholder="Ex. 12" [formControl]="fontSizeControl" min="10">
-    <span matSuffix>px</span>
-    <mat-error *ngIf="fontSizeControl.invalid">Min size: 10px</mat-error>
+    <input matInput type="number" placeholder="Ex. 12" formControlName="fontSize" min="10">
+    <span matTextSuffix>px</span>
+    <mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
   </mat-form-field>
 </form>

src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormControl, Validators} from '@angular/forms';
+import {NonNullableFormBuilder, Validators} from '@angular/forms';
+import {ThemePalette} from '@angular/material/core';
 
 /** @title Form field theming */
 @Component({
@@ -8,16 +9,14 @@ import {FormBuilder, FormControl, Validators} from '@angular/forms';
   styleUrls: ['form-field-theming-example.css'],
 })
 export class FormFieldThemingExample {
-  colorControl = new FormControl('primary');
-  fontSizeControl = new FormControl(16, Validators.min(10));
   options = this._formBuilder.group({
-    color: this.colorControl,
-    fontSize: this.fontSizeControl,
+    color: this._formBuilder.control('primary' as ThemePalette),
+    fontSize: this._formBuilder.control(16, Validators.min(10)),
   });
 
-  constructor(private _formBuilder: FormBuilder) {}
+  constructor(private _formBuilder: NonNullableFormBuilder) {}
 
   getFontSize() {
-    return Math.max(10, this.fontSizeControl.value || 0);
+    return Math.max(10, this.options.value.fontSize || 0);
   }
 }

src/components-examples/material/form-field/index.ts

@@ -3,11 +3,11 @@ import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
 import {
   FormFieldCustomControlExample,
@@ -51,11 +51,11 @@ const EXAMPLES = [
     CommonModule,
     MatButtonModule,
     MatCheckboxModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatRadioModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     ReactiveFormsModule,
   ],
   declarations: [...EXAMPLES, MyTelInput],

src/components-examples/material/select/BUILD.bazel

@@ -16,10 +16,10 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
-        "//src/material/legacy-select/testing",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "//src/material/select/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":select",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-select",
-        "//src/material/legacy-select/testing",
+        "//src/material/select",
+        "//src/material/select/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],