docs(material/form-field): Update form-field docs & examples (#29245)

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

@@ -1,13 +1,14 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
 
 /** @title Form field appearance variants */
 @Component({
   selector: 'form-field-appearance-example',
   templateUrl: 'form-field-appearance-example.html',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormFieldAppearanceExample {}

src/components-examples/material/form-field/form-field-custom-control/example-tel-input-example.html

@@ -1,30 +1,40 @@
-<div role="group" class="example-tel-input-container"
-     [formGroup]="parts"
-     [attr.aria-labelledby]="_formField.getLabelId()"
-     (focusin)="onFocusIn($event)"
-     (focusout)="onFocusOut($event)">
-  <input class="example-tel-input-element"
-         formControlName="area" size="3"
-         maxLength="3"
-         aria-label="Area code"
-         (input)="_handleInput(parts.controls.area, exchange)"
-         #area>
+<div
+  role="group"
+  class="example-tel-input-container"
+  [formGroup]="parts"
+  [attr.aria-labelledby]="_formField?.getLabelId()"
+  (focusin)="onFocusIn()"
+  (focusout)="onFocusOut($event)"
+>
+  <input
+    class="example-tel-input-element"
+    formControlName="area"
+    size="3"
+    maxLength="3"
+    aria-label="Area code"
+    (input)="_handleInput(parts.controls.area, exchange)"
+    #area
+  />
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element"
-         formControlName="exchange"
-         maxLength="3"
-         size="3"
-         aria-label="Exchange code"
-         (input)="_handleInput(parts.controls.exchange, subscriber)"
-         (keyup.backspace)="autoFocusPrev(parts.controls.exchange, area)"
-         #exchange>
+  <input
+    class="example-tel-input-element"
+    formControlName="exchange"
+    maxLength="3"
+    size="3"
+    aria-label="Exchange code"
+    (input)="_handleInput(parts.controls.exchange, subscriber)"
+    (keyup.backspace)="autoFocusPrev(parts.controls.exchange, area)"
+    #exchange
+  />
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element"
-         formControlName="subscriber"
-         maxLength="4"
-         size="4"
-         aria-label="Subscriber number"
-         (input)="_handleInput(parts.controls.subscriber)"
-         (keyup.backspace)="autoFocusPrev(parts.controls.subscriber, exchange)"
-         #subscriber>
+  <input
+    class="example-tel-input-element"
+    formControlName="subscriber"
+    maxLength="4"
+    size="4"
+    aria-label="Subscriber number"
+    (input)="_handleInput(parts.controls.subscriber)"
+    (keyup.backspace)="autoFocusPrev(parts.controls.subscriber, exchange)"
+    #subscriber
+  />
 </div>

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

@@ -5,4 +5,5 @@
     <mat-icon matSuffix>phone</mat-icon>
     <mat-hint>Include area code</mat-hint>
   </mat-form-field>
+  <p>Entered value: {{form.valueChanges | async | json}}</p>
 </div>