Skip to content

bug(mat-form-field): Custom input validation message not showing with mat-stepper #25830

Open
@Arti3DPlayer

Description

@Arti3DPlayer

Description

I implemented custom control based on official guides using ControlValueAccessor:

The issue that validation error is not showing until we touch our custom field. In my case I have an issue with Stepper, but it also not working when I do this.form.markAllAsTouched()

Error example

Reproduction

I provided example below based on official custom Phone field.

  • Click "Next" with empty fields.

Example on stackblitz

Expected Behavior

Errors must be shown as for default mat-input in both cases for: mat-stepper and this.form.markAllAsTouched()

Actual Behavior

Error is not shown for custom Tel field

Environment

  • Angular: 13+
  • CDK/Material: 13+
  • Browser(s): Any
  • Operating System (e.g. Windows, macOS, Ubuntu): Any

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/stepper

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions