angular/components · error · Error

MatTimepicker can only be registered with one input at a tim

Error message

MatTimepicker can only be registered with one input at a time

What it means

A single MatTimepicker instance can be connected to exactly one input (MatTimepickerInput or a custom MatTimepickerConnectedInput). registerInput throws if a second, different input tries to register while one is already attached, preventing two inputs from driving the same picker's state.

Source

Thrown at src/material/timepicker/timepicker.ts:303

  /** Closes the timepicker. */
  close(): void {
    if (this._isOpen()) {
      this._isOpen.set(false);
      this.closed.emit();

      if (this._animationsDisabled) {
        this._overlayRef?.detach();
      }
    }
  }

  /** Registers an input with the timepicker. */
  registerInput(input: MatTimepickerConnectedInput<D>): void {
    const currentInput = this._input();

    if (currentInput && input !== currentInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw new Error('MatTimepicker can only be registered with one input at a time');
    }

    this._input.set(input);
  }

  ngOnDestroy(): void {
    this._keyManager.destroy();
    this._localeChanges?.unsubscribe();
    this._onOpenRender?.destroy();
    this._overlayRef?.dispose();
  }

  _getOverlayHost() {
    return this._overlayRef?.hostElement;
  }

  /** Selects a specific time value. */
  protected _selectValue(option: MatOption<D>) {

View on GitHub (pinned to 0411926e7d)

Solutions

Give each <input [matTimepicker]> its own <mat-timepicker> instance
If sharing is intentional, wait for the first input to be destroyed/deregistered before registering the new one
Check for duplicated template ref usage (e.g. the same #picker passed to multiple inputs)

Example fix

// before
<input [matTimepicker]="picker" />
<input [matTimepicker]="picker" />
<mat-timepicker #picker></mat-timepicker>

// after
<input [matTimepicker]="picker1" />
<mat-timepicker #picker1></mat-timepicker>
<input [matTimepicker]="picker2" />
<mat-timepicker #picker2></mat-timepicker>

Defensive patterns

Strategy: validation

Validate before calling

// Check registration exclusivity before wiring inputs
function assertSingleInput(pickers: HTMLElement[]): void {
  const ids = new Set(pickers.map(p => p.id));
  if (ids.size < pickers.length) {
    throw new Error('Multiple inputs share the same mat-timepicker');
  }
}

Try / catch

try {
  input.registerWithPicker(picker);
} catch (e) {
  if (String(e?.message).includes('one input at a time')) {
    console.error('Create a dedicated <mat-timepicker> per input.');
  }
}

Prevention

One <mat-timepicker> per <input [matTimepicker]>
Avoid reusing the same template ref (#picker) across inputs
When swapping inputs programmatically, let the old input destroy/deregister first
Search templates for duplicated picker references in code review

When it happens

Trigger: Reusing one <mat-timepicker> template instance for two <input [matTimepicker]> fields; a destroyed-and-recreated input racing registration; programmatically calling registerInput for a new input without deregistering the old one.

Common situations: Sharing a picker across multiple form fields in a template (ng-template reuse), conditional rendering that creates a second input before the first unregisters, or custom connected-input implementations.

Related errors

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