angular/components · error

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

Error message

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

What it means

A mat-form-field supports at most one start-aligned hint: either a <mat-hint align="start"> or the field's hintLabel input, but not both, and never two start hints. The dev-mode check in MatFormField throws on duplicates to keep the hint row layout unambiguous.

Source

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

  private _processHints() {
    this._validateHints();
    this._syncDescribedByIds();
  }

  /**
   * 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) {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Remove one of the duplicate start hints, keeping either hintLabel or a single <mat-hint>
2. Set align="end" on the second hint if two hints are genuinely needed (one start, one end)
3. Merge the hint texts into a single hint element or into hintLabel

Example fix

// before
<mat-form-field hintLabel="Required">
  <input matInput>
  <mat-hint>Enter your name</mat-hint>
</mat-form-field>
// after
<mat-form-field>
  <input matInput>
  <mat-hint>Required — enter your name</mat-hint>
</mat-form-field>

// Ensure at most one start hint per form field:
// one hintLabel OR one <mat-hint> (align defaults to 'start').
<mat-form-field>
  <input matInput>
  <mat-hint align="start">Only one start hint</mat-hint>
  <mat-hint align="end">End hint allowed</mat-hint>
</mat-form-field>

When it happens

Trigger: Declaring two <mat-hint align="start"> elements inside one mat-form-field; or combining hintLabel="..." with a <mat-hint> that has align="start" (align defaults to start).

Common situations: Copy-pasted hint elements across template edits; a shared component adding a hint while the host template also sets hintLabel; developers unaware that omitting align on mat-hint defaults it to start.

Related errors

• mat-form-field must contain a MatFormFieldControl.
• MatFormField: Invalid appearance "${newAppearance}", valid v
• A drawer was already declared for 'position="${position}"'
• Invalid slider thumb input configuration! Valid configur
• Unable to retrieve options for autocomplete. Autocomplete pa

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