feat(material/form-field): Ability to support custom error message components inside a form field (#25399)

* feat(material/form-field): Ability to support custom error message components inside a form field

Adds an ability to use custom error components tagged with [matError] attributes inside a form field. This is useful when a reusable custom error message template is needed for form fields.

Example:

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput>
  <custom-error matError>Error message</custom-error>
</mat-form-field>

* feat(material/form-field): Ability to support custom error message components inside a form field

Adds an ability to use custom error components tagged with [matError] attributes inside a form field. This is useful when a reusable custom error message template is needed for form fields.

Example:

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput>
  <custom-error matError>Error message</custom-error>
</mat-form-field>

* feat(material/form-field): Ability to support custom error message components inside a form field

Adds an ability to use custom error components tagged with [matError] attributes inside a form field. This is useful when a reusable custom error message template is needed for form fields.

Example:

<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput>
  <custom-error matError>Error message</custom-error>
</mat-form-field>

Co-authored-by: kamarouski <kamarouski@google.com>

Author: kamarouski

src/material/form-field/directives/error.ts

@@ -19,7 +19,7 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
 
 /** Single error message to be shown underneath the form-field. */
 @Directive({
-  selector: 'mat-error',
+  selector: 'mat-error, [matError]',
   host: {
     'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',
     'aria-atomic': 'true',

src/material/form-field/form-field.html

@@ -83,7 +83,7 @@
      [ngSwitch]="_getDisplayedMessages()">
   <div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
        [@transitionMessages]="_subscriptAnimationState">
-    <ng-content select="mat-error"></ng-content>
+    <ng-content select="mat-error, [matError]"></ng-content>
   </div>
 
   <div class="mat-mdc-form-field-hint-wrapper" *ngSwitchCase="'hint'"

src/material/form-field/testing/shared.spec.ts

@@ -189,7 +189,9 @@ export function runHarnessTests(
 
     fixture.componentInstance.requiredControl.setValue('');
     dispatchFakeEvent(fixture.nativeElement.querySelector('#with-errors input'), 'blur');
-    expect(await formFields[1].getTextErrors()).toEqual(['Error 1', 'Error 2']);
+    expect(await formFields[1].getTextErrors()).toEqual(
+      isMdcImplementation ? ['Error 1', 'Error 2'] : ['Error 1'],
+    );
   });
 
   it('should be able to get hint messages of form-field', async () => {
@@ -271,7 +273,7 @@ export function runHarnessTests(
       <input matInput [formControl]="requiredControl">
 
       <mat-error>Error 1</mat-error>
-      <mat-error>Error 2</mat-error>
+      <div matError>Error 2</div>
       <mat-hint align="start">Hint 1</mat-hint>
       <mat-hint align="end">Hint 2</mat-hint>
     </mat-form-field>

tools/public_api_guard/material/form-field.md

@@ -59,7 +59,7 @@ export class MatError {
     // (undocumented)
     id: string;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatError, "mat-error", never, { "id": "id"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatError, "mat-error, [matError]", never, { "id": "id"; }, {}, never, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatError, [{ attribute: "aria-live"; }, null]>;
 }
@@ -147,7 +147,7 @@ export class MatFormField implements AfterContentInit, AfterContentChecked, Afte
     // (undocumented)
     _textPrefixContainer: ElementRef<HTMLElement>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "subscriptSizing": "subscriptSizing"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": "hideRequiredMarker"; "color": "color"; "floatLabel": "floatLabel"; "appearance": "appearance"; "subscriptSizing": "subscriptSizing"; "hintLabel": "hintLabel"; }, {}, ["_labelChildNonStatic", "_labelChildStatic", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error, [matError]", "mat-hint:not([align='end'])", "mat-hint[align='end']"], false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, [null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
 }