docs(form-field): implement error state getter in custom control example (#20275)

The custom input example wasn't showing how to implement the `errorState` getter which means that it can't show error messages.

Fixes #20269.

(cherry picked from commit d04a126)

Author: crisbeto

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

@@ -1,8 +1,8 @@
 <div [formGroup]="form">
-	<mat-form-field appearance="fill">
-		<mat-label>Phone number</mat-label>
-		<example-tel-input formControlName="tel" required></example-tel-input>
-		<mat-icon matSuffix>phone</mat-icon>
-		<mat-hint>Include area code</mat-hint>
-	</mat-form-field>
+  <mat-form-field appearance="fill">
+    <mat-label>Phone number</mat-label>
+    <example-tel-input formControlName="tel" required></example-tel-input>
+    <mat-icon matSuffix>phone</mat-icon>
+    <mat-hint>Include area code</mat-hint>
+  </mat-form-field>
 </div>

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

@@ -63,7 +63,6 @@ export class MyTelInput
   parts: FormGroup;
   stateChanges = new Subject<void>();
   focused = false;
-  errorState = false;
   controlType = 'example-tel-input';
   id = `example-tel-input-${MyTelInput.nextId++}`;
   describedBy = '';
@@ -129,6 +128,10 @@ export class MyTelInput
     this.stateChanges.next();
   }
 
+  get errorState(): boolean {
+    return this.parts.invalid && this.parts.dirty;
+  }
+
   constructor(
     formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
@@ -184,7 +187,7 @@ export class MyTelInput
     this.describedBy = ids.join(' ');
   }
 
-  onContainerClick(event: MouseEvent) {
+  onContainerClick() {
     if (this.parts.controls.subscriber.valid) {
       this._focusMonitor.focusVia(this.subscriberInput, 'program');
     } else if (this.parts.controls.exchange.valid) {