ng-dynamic-forms: Custom Validators Not Working

Hi,

Thanks for the wonderful library. We are using ng2-dynamic-form in our project. We have requirement of adding range check for input text field value. We are exploring to add custom validator for the same. But we are getting below error everytime. We have tried couple of method as mentioned in readMe here.

Please suggest whats right way to solve this issue.

    EXCEPTION: Uncaught (in promise): Error: validator "testValidator" is not provided via NG_VALIDATORS multi provider

Here is our code for form-module

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FormsModule, ReactiveFormsModule, NG_VALIDATORS} from "@angular/forms";
import {DynamicFormsCoreModule} from "@ng2-dynamic-forms/core";
import {DynamicFormCustomComponent} from "./dynamic-form-custom.component";
import {JsonFormComponent} from './jsonForm/json-form.component';
import {RangeValidator} from "./validators/rangeValidatots";

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        DynamicFormsCoreModule
    ],
    declarations: [
        DynamicFormCustomComponent, 
        JsonFormComponent,
        RangeValidator
    ],
    exports: [
        DynamicFormsCoreModule,
        DynamicFormCustomComponent,
        JsonFormComponent
    ],
    providers:[
        {provide: NG_VALIDATORS, useValue: testValidator, multi: true}
    ]
})
export class DynamicFormsUIModule {}

function testValidator() {

    return {
        testValidate: {
            valid: true
        }
    };
}

And we are trying to include validators in dynamic forms as

    new DynamicInputModel({

        id: "basicInput",
        label: "Example Input",
        list: ["abc", "Two", "Three", "Four", "Five"],
        maxLength: 51,
        placeholder: "example input",
        spellCheck: false,
        required: false,
        validators: {
            minLength: 1,
            maxLength: 2,
            testValidator: null
        },
        errorMessages: {
            required: "{{label}} is required."
        }
    },
        {
            element: {
                label: "test-label"
            },
            grid: {
                container: 'row'
                // control: "col-xs-3",
                // label: "col-xs-2"
            }
        }),

We are getting this error

    EXCEPTION: Uncaught (in promise): Error: validator "testValidator" is not provided via NG_VALIDATORS multi provider

We even tried creating validator directives like this

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
    selector: '[valueMin][formControlName],[valueMin][formControl],[valueMin][ngModel],[valueMax][formControlName],[valueMax][formControl],[valueMax][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => RangeValidator), multi: true }
    ]
})
export class RangeValidator implements Validator {
    constructor( @Attribute('valueMin') public valueMin: string, @Attribute('valueMax') public valueMax: string) {

    }

    validate(c: AbstractControl): { [key: string]: any } {
        // self value
        let v = c.value;
        console.log(`value checked is: ${v}`);

        let minVal = parseInt(this.valueMin);
        let maxVal = parseInt(this.valueMax);

        console.log(`valueMin = ${minVal} and valueMax = ${maxVal}`);
        v = parseInt(v);

        if(minVal && v<minVal){
            console.log(`min check failed`);
            return {
                valueMin: false
            }
        }
        if(maxVal && v>maxVal){
            console.log(`max check failed`);
            return {
                valueMax: false
            }
        }
        return null;
    }
}

and include it in module declarations like this

    declarations: [
        DynamicFormCustomComponent, 
        JsonFormComponent,
        RangeValidator
    ],

and then use like this

        validators: {
            minLength: 1,
            maxLength: 2,
            valueMin: 5,
            valueMax: 15
        },

In this case, we are getting the errors

    Error: Uncaught (in promise): Error: validator "valueMin" is not provided via NG_VALIDATORS multi provider

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 16 (12 by maintainers)

Most upvoted comments

Hi @udos86 Thanks for your prompt reply. After upgrading to 1.3.1, we are able to use custom validators.