Form validation within custom directive...?

Question

I have a HTML form that is being built up dynamically from a given "product" object and the fields that it has, allowing the user to modify the associated data. I am using a custom "editor" directive to handle the creation of the HTML elements needed to allow the user to update the data.

An example can be seen here: http://plnkr.co/edit/2fAVVpwTHFgxwTq4eAMI

Firstly, I'm not sure if this is the best way to achieve this, but it does (so far) seem to work okay. (Any other idea's welcome!)

However, I want to add validation rules to the controls, eg. require so that a message appears when the input is left empty. I have attempted to add these validation rules into the code (as seen in the template in the directive), but it never fires. I'm pretty sure it's something to do with me getting my scope wires-crossed somewhere... AngularJS Batarang is showing on the main scope an object of:

form: {
  {{fieldName}}: {}
}

Which is obviously wrong (and nonsense!)

tdakhla · Accepted Answer · 2013-08-12 12:54:26Z

17

Wrap the template in its own ng-form:

textTemplate =  '<div ng-form="editor">' +
                  '<input id="{{fieldName}}" name="{{fieldName}}" type="text" ng-model="fieldData.data" required>' +
                  '<div ng-show="editor.$dirty && editor.$invalid">Invalid:' +
                      '<span ng-show="editor.$error.required">Some validation error!</span>' +
                  '</div>' +
                '</div>';

The issue you're running into is that when creating an isolate scope (scope { ... }), you don't have access to the parent form, or any parent scope for that matter. IMO, this is definitely a good thing since you don't want your directive to hard-code the name of the parent form, and it keeps your directive as a self-contained unit.

Code: http://plnkr.co/edit/qCjs16tuwVjSNzJdkk71?p=preview

answered Aug 12, 2013 at 12:54

tdakhla

6604 silver badges4 bronze badges

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

6 Comments

Siyfion Over a year ago

Awesome answer, bang-on what I needed! :D

Exitos Over a year ago

This is the best of all the possible solutions I have seen. Well done!

Derek Over a year ago

I struggled with this for quite a while. I have a directive with isolate scope which includes some reusable form components via templateUrl, and a directive for validation. I couldn't get the validation errors to display, even when I used $parent. I also tried wrapping my template in its own html <form>, and when that didn't work I gave up on this path for a while until I came across your answer using ng-form, which did the trick! Thanks.

dotnethaggis Over a year ago

Should this work if I have a submit button in the form? As it is not triggering the error messages if the input in my directive is empty and it's a required field.

Sagi Over a year ago

So simple yet so awesome !

|

Hridya · Accepted Answer · 2013-08-12 12:10:27Z

-3

Instead of checking for form[fieldName].$dirty && form[fieldName].$invalid just check for the existence of model value

so textTemplate looks like below

textTemplate =  '<input id="{{fieldName}}" name="{{fieldName}}" type="text" ng-model="fieldData.data">' +
    '<div ng-show="!fieldData.data">Invalid:' +
        '<span ng-show="!fieldData.data">Some validation error!</span>' +
    '</div>';

see the updated change in http://plnkr.co/edit/BvXkGxA0GlGip7KLXUup?p=preview

answered Aug 12, 2013 at 12:10

Hridya

1

1 Comment

Siyfion Over a year ago

I think you might be missing the point; I need working validation. All that does is (essentially) display some text, there's no logic there for validation.

Collectives™ on Stack Overflow

Form validation within custom directive...?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related