angular/components · error

A hint was already declared for 'align="end"'.

Error message

A hint was already declared for 'align="end"'.

What it means

MatFormField allows at most one hint per alignment ('start' and 'end') among its <mat-hint> children and the hintLabel input. This error is thrown when a second hint with the same alignment is projected into the form field, because two hints at the same position cannot be rendered.

Source

Thrown at src/material/form-field/form-field.ts:683

  /**
   * Ensure that there is a maximum of one of each "mat-hint" alignment specified. The hint
   * label specified set through the input is being considered as "start" aligned.
   *
   * This method is a noop if Angular runs in production mode.
   */
  private _validateHints() {
    if (this._hintChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      let startHint: MatHint;
      let endHint: MatHint;
      this._hintChildren.forEach((hint: MatHint) => {
        if (hint.align === 'start') {
          if (startHint || this.hintLabel) {
            throw getMatFormFieldDuplicatedHintError('start');
          }
          startHint = hint;
        } else if (hint.align === 'end') {
          if (endHint) {
            throw getMatFormFieldDuplicatedHintError('end');
          }
          endHint = hint;
        }
      });
    }
  }

  /**
   * Sets the list of element IDs that describe the child control. This allows the control to update
   * its `aria-describedby` attribute accordingly.
   */
  private _syncDescribedByIds() {
    if (this._control) {
      let ids: string[] = [];

      // TODO(wagnermaciel): Remove the type check when we find the root cause of this bug.
      if (
        this._control.userAriaDescribedBy &&

View on GitHub (pinned to 0411926e7d)

Solutions

1. Remove or consolidate the duplicate <mat-hint> so only one hint exists per alignment.
2. Give extra hints the opposite align value (e.g. align="start") so they occupy the free slot.
3. If the hint is conditional, ensure only one branch can be active at a time (use if/else rather than two independent *ngIf).
4. Replace the second static hint with the hintLabel input or merge the messages into a single hint element.

Example fix

// before
<mat-form-field>
  <mat-hint align="end">Min 8 chars</mat-hint>
  <mat-hint align="end">Max 64 chars</mat-hint>
</mat-form-field>
// after
<mat-form-field>
  <mat-hint align="start">Max 64 chars</mat-hint>
  <mat-hint align="end">Min 8 chars</mat-hint>
</mat-form-field>

// template-level check before rendering hints
// ensure at most one hint per align value:
const startHints = hintList.filter(h => h.align === 'start');
const endHints = hintList.filter(h => h.align === 'end');
if (startHints.length > 1 || endHints.length > 1) {
  throw new Error('Only one mat-hint allowed per align value');
}

When it happens

Trigger: Rendering a MatFormField containing two <mat-hint align="end"> elements (or two <mat-hint align="start">, or a hint duplicating the hintLabel input); the check runs when hints are re-evaluated via _processHints during content init or ContentChildren changes.

Common situations: Duplicating a validation hint in a template with *ngIf branches that both render align="end" hints; combining hintLabel with a <mat-hint align="end"> while also adding another end-aligned hint after a copy/paste refactor; rendering hints from a loop without keys.

Related errors

• A mat-tab-nav-panel must be specified via [tabPanel].
• Input type "${type}" isn't supported by matInput.
• MatFormField: Invalid appearance "${newAppearance}", valid v
• mat-tab-group background color must be set through the Sass
• No selected tab could be found.

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/291eb6c671f6d368. Report an issue: GitHub.