{"action":"created","issue":{"url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/208","repository_url":"https://api.github.com/repos/udos86/ng2-dynamic-forms","labels_url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/208/labels{/name}","comments_url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/208/comments","events_url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/208/events","html_url":"https://github.com/udos86/ng2-dynamic-forms/issues/208","id":195785377,"number":208,"title":"Custom Validators Not Working","user":{"login":"ravi-thb","id":21302955,"avatar_url":"https://avatars.githubusercontent.com/u/21302955?v=3","gravatar_id":"","url":"https://api.github.com/users/ravi-thb","html_url":"https://github.com/ravi-thb","followers_url":"https://api.github.com/users/ravi-thb/followers","following_url":"https://api.github.com/users/ravi-thb/following{/other_user}","gists_url":"https://api.github.com/users/ravi-thb/gists{/gist_id}","starred_url":"https://api.github.com/users/ravi-thb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ravi-thb/subscriptions","organizations_url":"https://api.github.com/users/ravi-thb/orgs","repos_url":"https://api.github.com/users/ravi-thb/repos","events_url":"https://api.github.com/users/ravi-thb/events{/privacy}","received_events_url":"https://api.github.com/users/ravi-thb/received_events","type":"User","site_admin":false},"labels":[{"id":386134405,"url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-12-15T11:45:38Z","updated_at":"2016-12-16T07:30:01Z","closed_at":"2016-12-16T07:30:01Z","body":"Hi,\r\n\r\nThanks 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.\r\n\r\nPlease suggest whats right way to solve this issue.\r\n\r\n```\r\n    EXCEPTION: Uncaught (in promise): Error: validator \"testValidator\" is not provided via NG_VALIDATORS multi provider\r\n```\r\n\r\nHere is our code for form-module\r\n```javascript\r\nimport {NgModule} from \"@angular/core\";\r\nimport {CommonModule} from \"@angular/common\";\r\nimport {FormsModule, ReactiveFormsModule, NG_VALIDATORS} from \"@angular/forms\";\r\nimport {DynamicFormsCoreModule} from \"@ng2-dynamic-forms/core\";\r\nimport {DynamicFormCustomComponent} from \"./dynamic-form-custom.component\";\r\nimport {JsonFormComponent} from './jsonForm/json-form.component';\r\nimport {RangeValidator} from \"./validators/rangeValidatots\";\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        DynamicFormsCoreModule\r\n    ],\r\n    declarations: [\r\n        DynamicFormCustomComponent, \r\n        JsonFormComponent,\r\n        RangeValidator\r\n    ],\r\n    exports: [\r\n        DynamicFormsCoreModule,\r\n        DynamicFormCustomComponent,\r\n        JsonFormComponent\r\n    ],\r\n    providers:[\r\n        {provide: NG_VALIDATORS, useValue: testValidator, multi: true}\r\n    ]\r\n})\r\nexport class DynamicFormsUIModule {}\r\n\r\nfunction testValidator() {\r\n\r\n    return {\r\n        testValidate: {\r\n            valid: true\r\n        }\r\n    };\r\n}\r\n```\r\n\r\n\r\nAnd we are trying to include validators in dynamic forms as\r\n\r\n```javascript\r\n    new DynamicInputModel({\r\n\r\n        id: \"basicInput\",\r\n        label: \"Example Input\",\r\n        list: [\"abc\", \"Two\", \"Three\", \"Four\", \"Five\"],\r\n        maxLength: 51,\r\n        placeholder: \"example input\",\r\n        spellCheck: false,\r\n        required: false,\r\n        validators: {\r\n            minLength: 1,\r\n            maxLength: 2,\r\n            testValidator: null\r\n        },\r\n        errorMessages: {\r\n            required: \"{{label}} is required.\"\r\n        }\r\n    },\r\n        {\r\n            element: {\r\n                label: \"test-label\"\r\n            },\r\n            grid: {\r\n                container: 'row'\r\n                // control: \"col-xs-3\",\r\n                // label: \"col-xs-2\"\r\n            }\r\n        }),\r\n```\r\n\r\nWe are getting this error\r\n```\r\n    EXCEPTION: Uncaught (in promise): Error: validator \"testValidator\" is not provided via NG_VALIDATORS multi provider\r\n```\r\n\r\nWe even tried creating validator directives like this\r\n```javascript\r\nimport { Directive, forwardRef, Attribute } from '@angular/core';\r\nimport { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';\r\n\r\n@Directive({\r\n    selector: '[valueMin][formControlName],[valueMin][formControl],[valueMin][ngModel],[valueMax][formControlName],[valueMax][formControl],[valueMax][ngModel]',\r\n    providers: [\r\n        { provide: NG_VALIDATORS, useExisting: forwardRef(() => RangeValidator), multi: true }\r\n    ]\r\n})\r\nexport class RangeValidator implements Validator {\r\n    constructor( @Attribute('valueMin') public valueMin: string, @Attribute('valueMax') public valueMax: string) {\r\n\r\n    }\r\n\r\n    validate(c: AbstractControl): { [key: string]: any } {\r\n        // self value\r\n        let v = c.value;\r\n        console.log(`value checked is: ${v}`);\r\n\r\n        let minVal = parseInt(this.valueMin);\r\n        let maxVal = parseInt(this.valueMax);\r\n\r\n        console.log(`valueMin = ${minVal} and valueMax = ${maxVal}`);\r\n        v = parseInt(v);\r\n\r\n        if(minVal && v<minVal){\r\n            console.log(`min check failed`);\r\n            return {\r\n                valueMin: false\r\n            }\r\n        }\r\n        if(maxVal && v>maxVal){\r\n            console.log(`max check failed`);\r\n            return {\r\n                valueMax: false\r\n            }\r\n        }\r\n        return null;\r\n    }\r\n}\r\n```\r\nand include it in module declarations like this\r\n```javascript\r\n    declarations: [\r\n        DynamicFormCustomComponent, \r\n        JsonFormComponent,\r\n        RangeValidator\r\n    ],\r\n```\r\nand then use like this\r\n```javascript\r\n        validators: {\r\n            minLength: 1,\r\n            maxLength: 2,\r\n            valueMin: 5,\r\n            valueMax: 15\r\n        },\r\n```\r\n\r\nIn this case, we are getting the errors\r\n```\r\n    Error: Uncaught (in promise): Error: validator \"valueMin\" is not provided via NG_VALIDATORS multi provider\r\n````\r\n"},"comment":{"url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/comments/267534212","html_url":"https://github.com/udos86/ng2-dynamic-forms/issues/208#issuecomment-267534212","issue_url":"https://api.github.com/repos/udos86/ng2-dynamic-forms/issues/208","id":267534212,"user":{"login":"ravi-thb","id":21302955,"avatar_url":"https://avatars.githubusercontent.com/u/21302955?v=3","gravatar_id":"","url":"https://api.github.com/users/ravi-thb","html_url":"https://github.com/ravi-thb","followers_url":"https://api.github.com/users/ravi-thb/followers","following_url":"https://api.github.com/users/ravi-thb/following{/other_user}","gists_url":"https://api.github.com/users/ravi-thb/gists{/gist_id}","starred_url":"https://api.github.com/users/ravi-thb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ravi-thb/subscriptions","organizations_url":"https://api.github.com/users/ravi-thb/orgs","repos_url":"https://api.github.com/users/ravi-thb/repos","events_url":"https://api.github.com/users/ravi-thb/events{/privacy}","received_events_url":"https://api.github.com/users/ravi-thb/received_events","type":"User","site_admin":false},"created_at":"2016-12-16T07:30:01Z","updated_at":"2016-12-16T07:30:01Z","body":"Hi @udos86 \r\nThanks for your prompt reply.\r\nAfter upgrading to `1.3.1`, we are able to use custom validators."}}
{"actor":{"display_login":"ravi-thb"}}