fix(material/form-field): dynamic hint end alignment not working (#20657)

Binding to the `align` property of `mat-hint` didn't work, because while we were adding
a class, the class wasn't being used. Using a static value works by accident.

Fixes #20629.

(cherry picked from commit a087edd)

Author: crisbeto

src/material-experimental/mdc-form-field/directives/hint.ts

@@ -15,7 +15,7 @@ let nextUniqueId = 0;
   selector: 'mat-hint',
   host: {
     'class': 'mat-mdc-form-field-hint',
-    '[class.mat-form-field-hint-end]': 'align == "end"',
+    '[class.mat-mdc-form-field-hint-end]': 'align === "end"',
     '[id]': 'id',
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',

src/material-experimental/mdc-form-field/form-field.scss

@@ -58,6 +58,10 @@
   box-sizing: border-box;
 }
 
+.mat-mdc-form-field-hint-end {
+  order: 1;
+}
+
 // In order to make it possible for developers to disable animations for form-fields,
 // we only activate the animation styles if animations are not explicitly disabled.
 .mat-mdc-form-field:not(.mat-form-field-no-animations) {

src/material-experimental/mdc-input/input.spec.ts

@@ -538,16 +538,30 @@ describe('MatMdcInput without forms', () => {
     expect(input.getAttribute('aria-describedby')).toBe('start end');
   }));
 
+  it('should set a class on the hint element based on its alignment', fakeAsync(() => {
+    const fixture = createComponent(MatInputMultipleHintTestController);
+
+    fixture.componentInstance.startId = 'start';
+    fixture.componentInstance.endId = 'end';
+    fixture.detectChanges();
+
+    const start = fixture.nativeElement.querySelector('#start');
+    const end = fixture.nativeElement.querySelector('#end');
+
+    expect(start.classList).not.toContain('mat-mdc-form-field-hint-end');
+    expect(end.classList).toContain('mat-mdc-form-field-hint-end');
+  }));
+
   it('sets the aria-describedby when a hintLabel is set, in addition to a mat-hint',
     fakeAsync(() => {
       let fixture = createComponent(MatInputMultipleHintMixedTestController);
 
       fixture.detectChanges();
 
       let hintLabel = fixture.debugElement.query(
-          By.css('.mat-mdc-form-field-hint:not(.mat-form-field-hint-end)'))!.nativeElement;
+          By.css('.mat-mdc-form-field-hint:not(.mat-mdc-form-field-hint-end)'))!.nativeElement;
       let endLabel = fixture.debugElement
-          .query(By.css('.mat-mdc-form-field-hint.mat-form-field-hint-end'))!.nativeElement;
+          .query(By.css('.mat-mdc-form-field-hint.mat-mdc-form-field-hint-end'))!.nativeElement;
       let input = fixture.debugElement.query(By.css('input'))!.nativeElement;
       let ariaValue = input.getAttribute('aria-describedby');
 

src/material/form-field/form-field.scss

@@ -230,6 +230,10 @@ $mat-form-field-default-infix-width: 180px !default;
   position: relative;
 }
 
+.mat-form-field-hint-end {
+  order: 1;
+}
+
 .mat-form-field._mat-animation-noopable {
   .mat-form-field-label,
   .mat-form-field-ripple {

src/material/form-field/hint.ts

@@ -25,7 +25,7 @@ export const _MAT_HINT = new InjectionToken<MatHint>('MatHint');
   selector: 'mat-hint',
   host: {
     'class': 'mat-hint',
-    '[class.mat-right]': 'align == "end"',
+    '[class.mat-form-field-hint-end]': 'align === "end"',
     '[attr.id]': 'id',
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',

src/material/input/input.spec.ts

@@ -628,15 +628,30 @@ describe('MatInput without forms', () => {
     expect(input.getAttribute('aria-describedby')).toBe('start end');
   }));
 
+  it('should set a class on the hint element based on its alignment', fakeAsync(() => {
+    const fixture = createComponent(MatInputMultipleHintTestController);
+
+    fixture.componentInstance.startId = 'start';
+    fixture.componentInstance.endId = 'end';
+    fixture.detectChanges();
+
+    const start = fixture.nativeElement.querySelector('#start');
+    const end = fixture.nativeElement.querySelector('#end');
+
+    expect(start.classList).not.toContain('mat-form-field-hint-end');
+    expect(end.classList).toContain('mat-form-field-hint-end');
+  }));
+
   it('sets the aria-describedby when a hintLabel is set, in addition to a mat-hint',
     fakeAsync(() => {
       let fixture = createComponent(MatInputMultipleHintMixedTestController);
 
       fixture.detectChanges();
 
-      let hintLabel =
-          fixture.debugElement.query(By.css('.mat-hint:not(.mat-right)'))!.nativeElement;
-      let endLabel = fixture.debugElement.query(By.css('.mat-hint.mat-right'))!.nativeElement;
+      let hintLabel = fixture.debugElement
+          .query(By.css('.mat-hint:not(.mat-form-field-hint-end)'))!.nativeElement;
+      let endLabel = fixture.debugElement
+          .query(By.css('.mat-hint.mat-form-field-hint-end'))!.nativeElement;
       let input = fixture.debugElement.query(By.css('input'))!.nativeElement;
       let ariaValue = input.getAttribute('aria-describedby');