3rd Party Addons

Since version 1.4.9

What if you want to validate an input which is an Array of Strings or is using a 3rd party addon? Well Angular-Validation can now validate that too. As long as you follow the requirement and the code examples, you should be fine.

Demo

You can find a Plunker Demo here

Requirements

• Input element requires a name attributes.
• ngModel needs to be filled and need to be an Array of Strings/Objects
  • Array of Objects, for Angular-Validation to work it needs to know which object property you want to reference. Example var laptops = [{ id: 0, manufacturer: 'Acer' }, { id: 1, manufacturer: 'Lenovo' }]; The property we would most probably like to to validate is manufacturer and so we will define validation-array-objprop="manufacturer" in our html code.
• We need to use the ValidationService and provide the formName, this is very important because 3rd party addon use so much wrapper that we cannot find the form name easily.

Code Sample

This only work with the Directive for now.

Directive (html)

HTML Code

<!-- Example with ngTagsInput addon -->
<form name="vm.test">
  <tags-input 
        name="input1"
        ng-model="vm.tags1"
        validation="in_list:Tag4,Tag5|required"
        validation-array-objprop="text">
  </tags-input>
</form>

JavaScript Code

myApp.controller('Ctrl', ['ValidationService', function (ValidationService) {
  // we can use the `controllerAs` syntax if we want
  // VERY IMPORTANT, we need to provide the `formName`
  var vm = this;
  var myValidation = new ValidationService({ controllerAs: vm, formName: 'vm.test' });

  vm.tags1 = [
    { id: 1, text: 'Tag1' },
    { id: 2, text: 'Tag2' },
    { id: 3, text: 'Tag3' }
  ];

Validation

2 available attributes

• valid-array-require-how-many="one", this is the default entered
• valid-array-require-how-many="all"

You can use any validators that you which, it should all work the same. What you will probably use the most are in_list:... as it convenient for dropdown multiselect list. But what you need to know is that by default, the complete input becomes valid as soon as you have 1 valid value. It's probably confuses you, so let's code some examples.

By default if 1 value is found valid, the complete input is Valid

Let's take again our code example defined previously:

  <tags-input 
        name="input1"
        ng-model="vm.tags1"
        validation="in_list:Tag4,Tag5|required"
        validation-array-objprop="text"
        
        <!-- we could specify the argument validArrayRequireHowMany, but we could also skip it as it is defined as 'one' by default -->
        valid-array-require-how-many="one"
        >        
  </tags-input>

If we provide a list which include 'Tag4' then our list becomes automatically Valid.

vm.tags1 = [
    { id: 1, text: 'Tag1' },
    { id: 2, text: 'Tag2' },
    { id: 3, text: 'Tag3' },
    { id: 4, text: 'Tag4' }
  ];

What if I want to validate all the list?

In some cases, we might want to validate all of the values from the list. A better example would be an input that accept only tags which start by the prefix 'Tag' and are followed by a number 0-9, anything else should be invalid. So the validation to define would be:

<tags-input name="input2"
            ng-model="vm.tags2"
            validation="pattern=/Tag[0-9]/i:alt=Must be a Tag with a number.|required"
            validation-array-objprop="text"
            valid-array-require-how-many="all">
          </tags-input>

What did we do different here? We added the attribute valid-array-require-how-many="all"