chore: clear out mat-input-container references (#8535)

Clears out all the leftover `mat-input-container` usages inside the demo app and unit tests in order to avoid any potential confusion and to make removing the selector easier in the future.

Author: crisbeto

src/demo-app/autocomplete/autocomplete-demo.html

@@ -55,14 +55,14 @@
   <mat-card>
     <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
 
-    <mat-input-container>
+    <mat-form-field>
       <input
         matInput
         placeholder="State"
         [matAutocomplete]="groupedAuto"
         [(ngModel)]="currentGroupedState"
         (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
-    </mat-input-container>
+    </mat-form-field>
   </mat-card>
 </div>
 

src/demo-app/dialog/dialog-demo.html

@@ -103,9 +103,9 @@ <h2>Other options</h2>
 
   <p>It's Jazz!</p>
 
-  <mat-input-container>
+  <mat-form-field>
     <input matInput placeholder="How much?" #howMuch>
-  </mat-input-container>
+  </mat-form-field>
 
   <p> {{ data.message }} </p>
   <button type="button" (click)="dialogRef.close(lastCloseResult = howMuch.value)">Close dialog</button>

src/demo-app/stepper/stepper-demo.html

@@ -5,15 +5,15 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
   <mat-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
       <ng-template matStepLabel>Fill out your name</ng-template>
-      <mat-input-container>
+      <mat-form-field>
         <input matInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
         <mat-error>This field is required</mat-error>
-      </mat-input-container>
+      </mat-form-field>
 
-      <mat-input-container>
+      <mat-form-field>
         <input matInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
         <mat-error>This field is required</mat-error>
-      </mat-input-container>
+      </mat-form-field>
       <div>
         <button mat-button matStepperNext type="button">Next</button>
       </div>
@@ -23,10 +23,10 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       <ng-template matStepLabel>
         <div>Fill out your email address</div>
       </ng-template>
-      <mat-input-container>
+      <mat-form-field>
         <input matInput placeholder="Email address" formControlName="emailFormCtrl">
         <mat-error>The input is invalid.</mat-error>
-      </mat-input-container>
+      </mat-form-field>
       <div>
         <button mat-button matStepperPrevious type="button">Back</button>
         <button mat-button matStepperNext type="button">Next</button>

src/lib/autocomplete/autocomplete.spec.ts

@@ -1901,9 +1901,9 @@ class AutocompleteWithFormsAndNonfloatingPlaceholder {
 
 @Component({
   template: `
-    <mat-input-container>
+    <mat-form-field>
       <input matInput placeholder="State" [matAutocomplete]="auto" [(ngModel)]="selectedState">
-    </mat-input-container>
+    </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
       <mat-optgroup *ngFor="let group of stateGroups" [label]="group.label">
@@ -1935,9 +1935,9 @@ class AutocompleteWithGroups {
 
 @Component({
   template: `
-    <mat-input-container>
+    <mat-form-field>
       <input matInput placeholder="State" [matAutocomplete]="auto" [(ngModel)]="selectedState">
-    </mat-input-container>
+    </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event)">
       <mat-option *ngFor="let state of states" [value]="state">