From 90d9637e071c1304c236f1ed7f6a1d8c0e7904eb Mon Sep 17 00:00:00 2001
From: kamarouski <kamarouski@google.com>
Date: Thu, 4 Aug 2022 16:38:02 -0700
Subject: [PATCH 1/3] 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>
---
 src/material/form-field/directives/error.ts    | 2 +-
 src/material/form-field/form-field.html        | 2 +-
 src/material/form-field/testing/shared.spec.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/material/form-field/directives/error.ts b/src/material/form-field/directives/error.ts
index 20181978b9fb..138c76060485 100644
--- a/src/material/form-field/directives/error.ts
+++ b/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',
diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index 12a3f43e6585..fb719f85cbed 100644
--- a/src/material/form-field/form-field.html
+++ b/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'"
diff --git a/src/material/form-field/testing/shared.spec.ts b/src/material/form-field/testing/shared.spec.ts
index b29b3e072c70..8e6d0f7024be 100644
--- a/src/material/form-field/testing/shared.spec.ts
+++ b/src/material/form-field/testing/shared.spec.ts
@@ -271,7 +271,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>

From 7b97ffb04ca425cf43784834b001fc0da32f3c22 Mon Sep 17 00:00:00 2001
From: kamarouski <kamarouski@google.com>
Date: Thu, 4 Aug 2022 16:38:02 -0700
Subject: [PATCH 2/3] 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>
---
 tools/public_api_guard/material/form-field.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/public_api_guard/material/form-field.md b/tools/public_api_guard/material/form-field.md
index e2f46bd166ca..1e40fb314ed9 100644
--- a/tools/public_api_guard/material/form-field.md
+++ b/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]>;
 }

From acd8e44390c32847ada88ba40ebadaa66636feaa Mon Sep 17 00:00:00 2001
From: kamarouski <kamarouski@google.com>
Date: Thu, 4 Aug 2022 16:38:02 -0700
Subject: [PATCH 3/3] 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>
---
 src/material/form-field/testing/shared.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/material/form-field/testing/shared.spec.ts b/src/material/form-field/testing/shared.spec.ts
index 8e6d0f7024be..ebe29ca2db00 100644
--- a/src/material/form-field/testing/shared.spec.ts
+++ b/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 () => {