Skip to content

allow maxLength to validate without setting the native maxlength attribute #69831

Description

@daphned97

Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

The current maxLength validator in Signal Forms automatically sets the native maxlength HTML attribute on the underlying input.

This behaviour prevents a common UX pattern where the application wants to validate the length without preventing additional input. It makes it so that the user does not get the needed feedback that his input is too long.

For example, many applications prefer to:

  • allow the user to continue typing
  • visually indicate that the limit has been exceeded
  • display a validation message (e.g. "Maximum 50 characters")
  • let the user edit the value back into a valid state

With the native maxlength attribute applied automatically, the browser prevents any additional input, making it impossible to show an invalid "too long" state during normal typing.

Proposed solution

Provide a way to opt out of writing the native maxlength attribute while still keeping the validator active.

form(this.model, (schemaPath) => {
    maxLength(schemaPath.email, 100, {message: 'email is too long', nativeAttribute: false});
  });

Or possibly a way to disable this for all forms in the application.

Alternatives considered

The current workaround is to implement a custom validator instead of using the built-in one. However, this duplicates framework functionality solely to avoid reflecting the constraint to the DOM.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status
    No status

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions