Angular Js form validation error

Question

I have written simple code for angular validation. The create button should remain disabled util the user enters all the details. But now the button does not get disabled.The code for form is,

<form name="networkIDForm" novalidate>
  <div class="ActsummaryHdrs pb10">Create Network ID</div>

  <div class="form-group clearfix " ng-class="{ 'has-error': networkIDForm.networkID.$touched && networkIDForm.networkID.$invalid }">
    <input type="text" placeholder="Network ID" name="networkID" class="form-control column48 pull-left " required/>


  </div>

  <div class="clearfix clearfix mt20">

    <div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.firstname.$touched && networkIDForm.firstname.$invalid}">
      <input type="text" placeholder="First Name" name="firstname" class="form-control" required/>
    </div>
    <div class="column48 pull-left form-group" ng-class="{ 'has-error':  networkIDForm.lastname.$touched && networkIDForm.lastname.$invalid  }">
      <input type="text" placeholder="Last Name" name="lastname" class="form-control" required/>
    </div>
  </div>


  <div class="clearfix mt20 mb10 form-group" ng-class="{'has-error': networkIDForm.email.$touched && networkIDForm.email.$invalid }">

    <input type="text" id="to" name="email" placeholder="Email Address" class="form-control " required/>
  </div>



  <div class="clearfix mt20">

    <div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.password.$touched && networkIDForm.password.$invalid }">
      <input class="form-control" type="Password" placeholder="Password" name="password" required/>
    </div>
    <div class="column48 pull-right form-group" ng-class="{ 'has-error':networkIDForm.cpassword.$touched && networkIDForm.cpassword.$invalid  }">
      <input type="Password" placeholder="Confirm Password" name="cpassword" class="form-control" required/>
    </div>
  </div>


  <div class="clearfix mt20 mb10">

    <a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-disabled="networkIDForm.$invalid">Create</a>
    <a id="CreateUserBackBtn" onclick="showCreateNetworkID()" class="btn general_btns_grey pull-right mr5" href="">Back</a>

  </div>

</form>

Have a look here : getbootstrap.com/components/#nav-disabled-links — Vivek
– Vivek, Commented Dec 17, 2015 at 9:30

Anik Islam Abhi · Accepted Answer · 2015-12-17 09:50:02Z

1

You can't disable anchor tag using ng-disabled.

Try to use button tag instead

<button  id="CreateUserCreateBtn" type="button"  class="btn general_btns_green pull-right ml5"  ng-disabled="networkIDForm.$invalid">Create</button>

or you can do it using ng-class

Like this

.not-active {
   pointer-events: none;
   cursor: default;
}

<a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-class="{'not-active' : networkIDForm.$invalid }">Create</a>

You are also missing ng-model in your form.

JSFIDDLE

edited Dec 17, 2015 at 9:50

answered Dec 17, 2015 at 9:20

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

4 Comments

SavantMohan Over a year ago

Hi , I changed the anchor tag to button , but still the button is not getting disabled. Also if i hardcode ng-disabled to true in the anchor tag , the the button gets disabled.

Anik Islam Abhi Over a year ago

@user3177493 can you provide jsfiddle ?

SavantMohan Over a year ago

Thank you Anik. Hope fully your code should help me :)

SavantMohan Over a year ago

Hey thank you very much. The problem was with ng-model. Earlier i haven't include that. you saved my day buddy @Anik Islam Abhi

Collectives™ on Stack Overflow

Angular Js form validation error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related