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)
Hi @udos86 Thanks for your prompt reply. After upgrading to
1.3.1, we are able to use custom validators.