Pass parameter to Angular 7 template driven form custom validator

Question

How can I pass a parameter to a custom validator written for a Template Driven Form in Angular 7?

I've got the following code put together from multiple other questions and blog posts, but most center around Reactive forms rather than tempalte.

import { AbstractControl, ValidatorFn, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';

// validation function
function validateMinValue(minValue: number): ValidatorFn {
    return (c: AbstractControl) => {

        console.log(minValue); 
        return null;
    }
}

@Directive({
    selector: '[minValue][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: MinValueValidator, multi: true }
    ]
})
export class MinValueValidator implements Validator {
    @Input("minValue") minValue;
    validator: ValidatorFn;

    constructor() {
        this.validator = validateMinValue(this.minValue);
    }

    validate(c: FormControl) {
        return this.validator(c);
    }
}

How could I access the value passed to minValue in an input like this

<input type="text" name="testInput" class="form-control"
        [(ngModel)]="testValue" required
        currencyMask [options]="{ thousands: ',', decimal: '.' }"
        minValue="100">

Have you tried to use ngOnInit instead of constructor to initialize validator? — yurzui
– yurzui, Commented Sep 26, 2019 at 14:27

yurzui · Accepted Answer · 2019-09-26 14:33:13Z

2

You should be using ngOnInit hook to initialize validator since there is no Input property initialized in constructor yet.

ngOnInit() {
   this.validator = validateMinValue(this.minValue);
}

This way the initialized value will be passed to your validator.

Another way is to simple define validator within your custom directive and take minValue from current context this:

export class MinValueValidator implements Validator {
    @Input("minValue") minValue;

    validate(c: FormControl) {
        console.log(this.minValue); 
        return null;
    }
}

edited Sep 26, 2019 at 14:33

answered Sep 26, 2019 at 14:30

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4676340 Over a year ago

While true, it doesn't answer the question about how to pass the parameter to the validator

AVJT82 Over a year ago

@Maryannah, OP is doing the right thing, now it's successfully passed when moving code into OnInit like in answer :) stackblitz.com/edit/angular-4ur8ju?file=src/app/… And to the OP: notice that you need to use [minValue]="100" if you want to pass a number, which I assume you want.

Collectives™ on Stack Overflow

Pass parameter to Angular 7 template driven form custom validator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related