angularjs: access form field inside directive

Question

I have a directive barFoo that has the following template:

<div>
    ....
    <input ng-model="data">
</div>

This directive is used inside a form! Now, inside this directive I want to do things like

element.find('input').$setValidity('bar-valid', false);

However, this doesn't work. Also the input field doesn't have a name attribute. Is there any way to do this without a 'name' attribute ?

UPDATE: An other solution is to define ngModel on the directive element

<bar-foo ng-model="data.value"></bar-foo>

And rewrite the directive as follows

....
    .directive('barFoo', function () {
        return {
            require: 'ngModel',
            ...
            link: function (scope, element, attrs, ctrl) {
                ctrl.$setValidity('bar-valid', false);
            }
    });

Community · Accepted Answer · 2017-05-23 12:03:41Z

1

Have a look at this question: AngularJS Form Validation Directive $setValidity on element

I will give you exactly what you need including code

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Mar 3, 2014 at 10:07

schacki

9,5335 gold badges31 silver badges32 bronze badges

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

4 Comments

Jeanluca Scaljeri Over a year ago

The solution in that post is to use the name attribute. In this question I'm wondering if it is possible to do it without

schacki Over a year ago

$serValidity is part of the angularjs magic. If you want to use it, than you need to stick to angularjs Form handling. And this means, you need a name attribute. What is the problem with the name attribute anyway?

Jeanluca Scaljeri Over a year ago

Well, the directive is generic. Inside one form it can be used multiple times. So if I need to use the name attribute I need to generate a random name (I think). So thats why I was wondering if I could do without

harishr Over a year ago

you will still have to user the name attribute.. only thing is: you will have to use ng-form inside your directive

maurycy · Accepted Answer · 2014-03-03 10:41:57Z

1

You can call a directive with name="itAmazingName" and use it in directive template, that should solve your problems

answered Mar 3, 2014 at 10:41

maurycy

8,4201 gold badge30 silver badges44 bronze badges

3 Comments

Jeanluca Scaljeri Over a year ago

This cannot work. If you have multiple elements with name="itAmazingName", I would say that the $setValidity breaks, because the form treats all the elements as one entity!

maurycy Over a year ago

Who said about multiple elements with same name? I only suggested to use name for directive and then consume it in directive template

Jeanluca Scaljeri Over a year ago

Ok, you want to call the directive element with a name attribute. Interesting, but still you have to generate a name attribute value.

Collectives™ on Stack Overflow

angularjs: access form field inside directive

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related