FormlyValidator

Automate fields validation in Angular-Formly.

Install

meteor add wieldo:angular-formly-validator

Getting Started

1. Add package using meteor add (see above)
2. Add the following dependencies to your AngularJS module:

angular.module('myApp', [
    'formly',
    'formlyValidator'
  ])

How to use it

Register validator

formlyValidator.register('required', function(config, $viewValue, $modelValue, scope) {
    return true;
});

Set validator for formly field

In field configuration, use structure as in example below:

{
    transformers: {
        validators: {
            validatorName: validatorConfig
        }
    }
}

formlyValidator service

See formlyValidator

Helper methods

Each validator has build-in helper methods.

this.createError(msg:string)

@returns Error

Throws Error with this message syntax

[formlyValidator] [validatorName] <msg>

Built-in validators

required

{
    required: <boolean>
}

minlength

{
    minlength: <integer>
}

maxlength

{
    maxlength: <integer>
}

minnumber

{
    minnumber: <integer>
}

maxnumber

{
    maxnumber: <integer>
}

pattern

Check if model matches pattern

{
    pattern: <RegExp|string>
}

notpattern

Check if model does not match pattern (negation of pattern)

{
    notpattern: <RegExp|string>
}

match

Check if model matches the other model.

Field's key as a value.

{
    match: <string>
}

notmatch

Check if model does not match the other model (negation of match)

Field's key as a value.

{
    notmatch: <string>
}

contain

Check if model contains phrase of phrases.

{
    contain: <string|string[]>
}

notcontain

Check if model does not contain phrase of phrases.

{
    notcontain: <string|string[]>
}

allowed

Check if model equals one of allowed values.

{
    allowed: <any|any[]>
}

notallowed

Check if model does not equal one of not allowed values.

{
    notallowed: <any|any[]>
}

Example

angular.module('myAppName', [
    'formly',
    'formlyValidator'
  ])
  .run(runApp)
  .controller('demoCtrl', demoCtrl);
  
  function runApp(formlyValidator) {
        
        // register customRequired validator
        formlyValidator.register('customRequired', function(configValue, $viewValue, $modelValue) {
            if(configValue !== true) {
                return true;
            }
            var value = $viewValue || $modelValue;
            return (value && value !== "") === true;
        });
        
  }
   
  function demoCtrl() {
        var vm = this;
        
        vm.fields = [
            key: 'firstName',
            type: 'input',
            templateOptions: {
                label: "First name"
            },
            transformers: {
                validators: {
                    customRequired: true
                }
            }
        ];
        
        // if firstName value is empty
        // then $scope.form.firstName.$error contain customRequired === false
  }