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 attribute

• valid-array-require-how-many="one", this is the Default and is not required to be type.
• 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 word 'Tag' and are followed by a number 0-9, anything else should be invalid. So the example 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"