refactor(material/form-field): use ID generator

Switches to using the ID generator service to create unique IDs.

Author: crisbeto

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

@@ -14,8 +14,7 @@ import {
   HostAttributeToken,
   inject,
 } from '@angular/core';
-
-let nextUniqueId = 0;
+import {_IdGenerator} from '@angular/cdk/a11y';
 
 /**
  * Injection token that can be used to reference instances of `MatError`. It serves as
@@ -35,7 +34,7 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
 })
 export class MatError {
-  @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;
+  @Input() id: string = inject(_IdGenerator).getId('mat-mdc-error-');
 
   constructor(...args: unknown[]);
 

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

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Directive, Input} from '@angular/core';
-
-let nextUniqueId = 0;
+import {Directive, inject, Input} from '@angular/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
 
 /** Hint text to be shown underneath the form field control. */
 @Directive({
@@ -26,5 +25,5 @@ export class MatHint {
   @Input() align: 'start' | 'end' = 'start';
 
   /** Unique ID for the hint. Used for the aria-describedby on the form field control. */
-  @Input() id: string = `mat-mdc-hint-${nextUniqueId++}`;
+  @Input() id: string = inject(_IdGenerator).getId('mat-mdc-hint-');
 }

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

@@ -34,6 +34,7 @@ import {
 } from '@angular/core';
 import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
 import {Subject, Subscription, merge} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MAT_ERROR, MatError} from './directives/error';
@@ -105,8 +106,6 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken<MatFormFieldDef
   'MAT_FORM_FIELD_DEFAULT_OPTIONS',
 );
 
-let nextUniqueId = 0;
-
 /** Default appearance used by the form field. */
 const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
 
@@ -191,6 +190,7 @@ export class MatFormField
   private _changeDetectorRef = inject(ChangeDetectorRef);
   private _dir = inject(Directionality);
   private _platform = inject(Platform);
+  private _idGenerator = inject(_IdGenerator);
   private _defaults = inject<MatFormFieldDefaultOptions>(MAT_FORM_FIELD_DEFAULT_OPTIONS, {
     optional: true,
   });
@@ -305,10 +305,10 @@ export class MatFormField
   _hasTextSuffix = false;
 
   // Unique id for the internal form field label.
-  readonly _labelId = `mat-mdc-form-field-label-${nextUniqueId++}`;
+  readonly _labelId = this._idGenerator.getId('mat-mdc-form-field-label-');
 
   // Unique id for the hint label.
-  readonly _hintLabelId = `mat-mdc-hint-${nextUniqueId++}`;
+  readonly _hintLabelId = this._idGenerator.getId('mat-mdc-hint-');
 
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState = '';