How to add form validation which populated using directive in angular js?

Question

Am developing a registration form in AngularJS . In which am reusing the same form at 4 different places. For that am using a common form at single html page like the below.

<div>
   <div>
        <div class="label-div float-left">
            <label>
                Address:
             </label>
            <input type="text" ng-model="addressInfo.addressLine1" />
        </div>
   </div>
</div>

In my registration using the directive of AngularJS am reusing it in 4 different place like below

<registration-form></registration-form>
<input type="button" value ="continue" >

How can i disable button in registration html since my directive template has my form content .

ms87 · Accepted Answer · 2014-02-03 05:57:23Z

1

I would place the submit button inside the directive, and handle the ng-click event of the submit button by passing it through the scope of the directive

scope:{
onSubmit;'&'
}

inside your directives link function:

scope.submit=function(){
scope.onSubmit();
}

and your directive template:

<div>
   <form name="contactsForm">
        <div class="label-div float-left">
            <label>
                Address:
             </label>
            <input type="text" ng-model="addressInfo.addressLine1" />
            <input type="button" value ="continue" ng-click="submit()" ng-disabled="contactsForm.$invalid" >
        </div>
   </form>
</div>

usage:

<registration-form on-submit="postToServer()"></registration-form>

and in your parent controller, put any logic you want to execute when the form is submitted:

$scope.postToServer=function(){
alert("posting to server");
}

EDIT

Plunk.

EDIT 03/02-2014, another way would be to pass a flag from the directive to the parent controller indicating whether the form is valid or not, see how the "outer button"'s ng-disabled is hooked up in the plunk (I've updated it.)

edited Feb 3, 2014 at 5:57

answered Jan 31, 2014 at 13:34

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

6 Comments

Vinodh Over a year ago

i have mentioned in my question , my submit button is not in directive , it is in my html , please tell how to disable it there for invalid form validation

ms87 Over a year ago

I was saying a more cleaner way would be to handle that inside the directive. Is it an absolute necessity to have your submit button outside of the directive? Either way, I've updated my plunk to illustrate how to achieve what you want to achieve.

Vinodh Over a year ago

if am repeating this directive three times in html for various , then how to disable the submit button in my html , only if all three were filled

ms87 Over a year ago

create 3 separate variable in charge of tracking the validity of each directive, then pass each individual field to each directive and bind your ng-disabled to (!validFlag1 || !validFlag2 || !validFlag3)

Vinodh Over a year ago

am going to add <registration-form on-submit="postToServer()"></registration-form> 3 times how to do that. sorry am a beginner

|

Collectives™ on Stack Overflow

How to add form validation which populated using directive in angular js?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related