Add a validator (and directive) for the step input attribute

[QuentinFchx]

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

forms

Description

The step attribute (spec) adds basic HTML validation to an input.
It checks wether the value matches a combination of base value and step, and can trigger a stepMismatch validation error.

Use-case:
The validation could help to enforce integer on inputs, instead of using pattern="\d*" (which has already its own validator)

Proposed solution

We could introduce a validator to check a control's value against a step attribute

Draft code

// Inspired by the minValidator
export function stepValidator(step: number | 'any', min: number = 0): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (isEmptyInputValue(control.value) || isEmptyInputValue(step) || step === 'any') {
            return null;
        }
        const value = parseFloat(control.value);
        return !isNaN(value) && (value - min) % step !== 0 ? { step: { step, actual: control.value } } : null;
    };
}

We could also add an associated directive for at least the type="number" input.

selector: "input[type=number][step][formControlName],input[type=number][step][formControl],input
[type=number][step][ngModel]"

By default, if the attribute is absent, the input still has a default step, but in that case the directive would not activate (since no attribute)
However, this can break existing code since step should be explicitely given any as a value to prevent validation, and I'm not sure most users are aware of this.

Alternatives considered

Let users implement their own step validation, or use the pattern validator for specific cases (such as integer enforcement).

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.