CODEWITHSUNDEEP
angularjsvalidation
SavantMohan
SavantMohan

Reputation: 35

Angular Js form validation error

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>

Upvotes: 0

Views: 74

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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

Upvotes: 1

Related Questions