angular form validation inside repeated directive

Question

I've been learning validation forms with angular. I'm using ng-pattern to define the correct format of the input. But after customizing the classes depending on the element's parameters ($valid, $invalid, $error) it requires a lot of code to define the css behaviour related to validation.

So I am exploring the option to build a directive element which could contain all the necessary behaviour.

Here's a plunker illustrating this: plunker

Here's the way I would implement the form so I only need to stack the directive elements with their attributes like this : (example here with 2 inputs, but could be more)

<form role="form" class="form-horizontal" name="signup_form">

    <input-validation 
    ng-model="register.age" 
    namevalue="age" 
    formvalue="signup_form"
    labeltext="What's your Age?" 
    patterntext="/^[0-9]{1,2}$/" 
    errortext="Age must between 1 and 99" 
    placeholdertext="Enter your Age"></input-validation>

    <input-validation 
    ng-model="register.firstname" 
    namevalue="firstname" 
    formvalue="signup_form"
    labeltext="What's your Name?" 
    patterntext="/^[a-zA-Z0-9]{4,20}$/" 
    errortext="Name must between 1 and 20 characters long" 
    placeholdertext="Enter your Name"></input-validation>

  </form>

With a directive as such :

app.directive('inputValidation', function(){
  return{
        restrict: 'E',
        templateUrl : 'inputValidation.html',
        scope: {
            inputtext: '=ngModel',
            formvalue: '=',
            namevalue: '=',
            labeltext: '@',
            errortext: '@',
            placeholdertext: '@',
            patterntext: '@',
            autofocusvalue: '@'
        }
    };
});

But this doesn't work properly. I understand that the solution could be a combination of compile, require inside the directive, or using the link with the 4th parameter (ctrl) but I'm not sure how to implement this and could use some help.

You could try my angular validation module instead of all this hassle jonsamwell.com/dynamic-angularjs-validation — Jon
– Jon, Commented Jul 19, 2014 at 14:00
Hi @JonSamwell, thanks for your reply and your link. I'm testing your module. there are 2 things you need to correct on this page jonsamwell.github.io/angular-auto-validate : when you install with bower the library script to insert should be :<script src="bower_components/angular-auto-validate/dist/jcs-auto-validate.min.js"></script> and in the form example, the second ng-model should be model.password. Does your model allow validation on blur? — vonwolf
– vonwolf, Commented Jul 20, 2014 at 11:48
also : <div classs="form-row"> are the three 's' a typo? Because it works much better with just 2 :) — vonwolf
– vonwolf, Commented Jul 20, 2014 at 12:06
Hi @vonwolf thanks for this - I've just corrected them. Yes the library can do validation on blur by the use of ngModelOptions see jonsamwell.github.io/angular-auto-validate/#ngmodeloptions - Email me if you have any more questions about it. If you are using Angular 1.3 and above this might be useful to you jonsamwell.com/… — Jon
– Jon, Commented Jul 20, 2014 at 13:53
@JonSamwell Wow it's working great. I have reinstalled the module with Bower, it seems you need to update also the bower.json file which is added to bower_components as such : "main": "./dist/jcs-auto-validate.min.js", — vonwolf
– vonwolf, Commented Jul 20, 2014 at 18:58

Jon · Accepted Answer · 2014-07-20 19:18:39Z

1

You could try my angular validation module instead of all this hassle http://www.jonsamwell.com/dynamic-angularjs-validation

It favours reducing the complexity of the HTML and all the ng-show expressions you would need in favour of dynamically adding error messages to elements. This means you can just decorate your elements with validation attributes and not have to worry about anything else. It is also i18n enabled now :-)

answered Jul 20, 2014 at 19:18

Jon

4,2956 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular form validation inside repeated directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related