docs(material/form-field): Update example to not call function in template (#28748)

(cherry picked from commit fc43fff)

Author: mmalerba

pkg-externals.bzl

@@ -19,6 +19,7 @@ PKG_EXTERNALS = [
     "@angular/common/http/testing",
     "@angular/common/testing",
     "@angular/core",
+    "@angular/core/rxjs-interop",
     "@angular/core/testing",
     "@angular/forms",
     "@angular/platform-browser",

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

@@ -1,9 +1,13 @@
 <div class="example-container">
   <mat-form-field>
     <mat-label>Enter your email</mat-label>
-    <input matInput placeholder="pat@example.com" [formControl]="email" required>
+    <input matInput
+           placeholder="pat@example.com"
+           [formControl]="email"
+           (blur)="updateErrorMessage()"
+           required>
     @if (email.invalid) {
-      <mat-error>{{getErrorMessage()}}</mat-error>
+      <mat-error>{{errorMessage}}</mat-error>
     }
   </mat-form-field>
 </div>

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

@@ -1,7 +1,9 @@
 import {Component} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {merge} from 'rxjs';
 
 /** @title Form field with error messages */
 @Component({
@@ -14,11 +16,21 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 export class FormFieldErrorExample {
   email = new FormControl('', [Validators.required, Validators.email]);
 
-  getErrorMessage() {
+  errorMessage = '';
+
+  constructor() {
+    merge(this.email.statusChanges, this.email.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateErrorMessage());
+  }
+
+  updateErrorMessage() {
     if (this.email.hasError('required')) {
-      return 'You must enter a value';
+      this.errorMessage = 'You must enter a value';
+    } else if (this.email.hasError('email')) {
+      this.errorMessage = 'Not a valid email';
+    } else {
+      this.errorMessage = '';
     }
-
-    return this.email.hasError('email') ? 'Not a valid email' : '';
   }
 }