10000 Get value of the validations applied to control. ie., minLegth or maxLength · Issue #48662 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

Get value of the validations applied to control. ie., minLegth or maxLength #48662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
anuj-scanova opened this issue Jan 8, 2023 · 15 comments
Open

Get value of the validations applied to control. ie., minLegth or maxLength #48662

anuj-scanova opened this issue Jan 8, 2023 · 15 comments
Labels
area: forms
Milestone
needsTriage

Comments

@anuj-scanova
Copy link

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

forms

Description

I'm developing a UI to display the counter next to the input field to show the 10/100 character count against the maximum value allowed.

I have set Validators.maxLength(100) validation but there is no option to get the maximum value set for the validator.

One way to do this is to set the maximum value statically but I want to keep it dynamic against the validation set for the control.

Proposed solution

The list of validators applied on a control could be exposed with metadata containing the set values for each validation.

This will be helpful in the runtime check for the validation value.

Alternatives considered

The validation and its value are exposed when an error occurs (validation fail) on the control. But this cannot be used in the counter because the value will be disclosed only when there is an error.
@zetti-caletti
Copy link
zetti-caletti commented Jan 9, 2023 •
edited
Loading

Had more or less the same problem a few days ago. Wanted to read the values of Validator.min and Validator.max.
I had a Form and passed a sub-form (formGroup) to another Component. That component was responsible for validation and should read the validators values. But doesn't work.
A validator is a function (ValidatorFn) which has to return null when the control is valid and return any object, when the control is invalid. In that return object you can pass the arguments for this validator. Like Angular does for example with the min and max validator. The problem is, as you correctly mentioned, that you can read these values only if the control is invalid.
I think there is no other option than changing the type of validators.
For example:

type Validator = {
    // existing validate function
    validate: ValidatorFn;

    // optional name of the validator with with you can access the validator with control.getValidator('myCustomValidator')
    // and then you can do control.getValidator('myCustomValidator').params['foo']
    name?: string;

    // optional params passed to validator
    params?: { [key: string]: any };
} | ValidatorFn; // backwards compatibility

My example when I needed to read the params of the min and max validators:

import { FormControl, FormGroup } from "@angular/forms";

interface DurationForm {
    days: FormControl<number>;
    hours: FormControl<number>;
    minutes: FormControl<number>;
}

@Component({
    selector: "app-duration-edit",
    templateUrl: "./duration-edit.component.html",
    styleUrls: ["./duration-edit.component.scss"],
})
export class DurationEditComponent {
    @Input() duration!: FormControl<number>;

    readonly _durationFormGroup = new FormGroup<DurationForm>({
        days: new FormControl(0, { nonNullable: true }),
        hours: new FormControl(0, { nonNullable: true }),
        minutes: new FormControl(0, { nonNullable: true }),
    });

    ngOnInit() {
        this.duration.valueChanges.subscribe((minutes) => {
            // if value was changed externally, read min and max values from validator and apply changes to days, hours, minutes
            // change available values for the user depending on min and max values
            // would be nice to have this.durationControl.getValidator('min').params[0] or .params.min;
        });

        this._durationFormGroup.valueChanges.subscribe(() => {
            // validate and patch value to duration control
            // this.durationControl.patchValue(value, { emitEvent: false });
            const days = this.daysControl.value;
            const hours = this.hoursControl.value;
            const minutes = this.minutesControl.value;
        });
    }

    get daysControl() {
        return this._durationFormGroup.get('days') as DurationForm['days'];
    }
    get hoursControl() {
        return this._durationFormGroup.get('hours') as DurationForm['hours'];
    }
    get minutesControl() {
        return this._durationFormGroup.get('minutes') as DurationForm['minutes'];
    }
}

@ngbot ngbot bot added this to the needsTriage milestone Jan 11, 2023
@Xriuk
Copy link
Xriuk commented Apr 14, 2023

+1 this would be really useful

@oidacra
Copy link
oidacra commented Apr 14, 2023 •
edited
Loading

Same problem here.
I want to create a directive using Validators.maxLength, and I need access to the control(NgControl) and get the value to add an attribute to the input.
The only moment when you get those values are from errors.

@Kahera
Copy link
Kahera commented Aug 24, 2023

+1, would also be really handy to be able to pass the value dynamically to translate strings for error messages etc.

@carlos-ds
Copy link

+1, ran into a similar issue today where I wanted to read the min and max validator values for displaying an error message.

@lwitzani
Copy link

+1, exactly what carlos-ds said

@HoppelHase23
Copy link

+1, for the same reasons given above.

@EdSouthgate
Copy link

+1 again for the same reasons as above.

@janaiscoding
Copy link

+1, same reasons as above

@SSE-programmer
Copy link

+1, for the same reasons given above.
< 8000 input type="hidden" data-csrf="true" name="authenticity_token" value="9ob4n65ooUJV7QW3UPJibs00qzAFbHVw5fqDHmvmUSliSWj8mHuYbnSRHOCLmeMBCbzHomMJdaLHjkNSIAsFSg==" />

@bobbhy
Copy link
bobbhy commented Apr 2, 2024

+1, same reasons as above

@JanProchy
Copy link

+1 pls

@xiduzo
Copy link
xiduzo commented Mar 22, 2025

+1, how is this not even a feature yet 😟

@oidacra
Copy link
oidacra commented Mar 22, 2025

I am not sure, but I think this could help solve many workarounds out there.

@vojtesaak
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: forms
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
0