CODEWITHSUNDEEP
javascriptangularjs
Muddu Patil
Muddu Patil

Reputation: 721

Button is not Disabling using ng-disabled

Hi I've a form and i'm unable to disable the submit button if the fields are empty. Below is the code can any one help me to understand what might be problem?

<modal title="Add Navigation" visible="showAddModal">
    <form  id="addform" class="form-horizontal">
      <div class="modal-body">
        <div ng-classs="form-group">
          <label class="col-sm-2 control-label">Client Type</label>
          <div class="col-sm-10">
            <select name="account" class="form-control m-b w-md" ng-model="navData.clientType" ng-required="true">
              <option value="android">Android</option>
              <option value="ios">iOs</option>
            </select>
          </div>
        </div>   
        <div class="form-group">
          <label class="col-sm-2 control-label">Client Version</label>
          <div class="col-sm-10">
            <input type="text" class="form-control w-md" ng-model="navData.clientVersion" placeholder="" required>                        
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Key Word</label>
          <div class="col-sm-10">
            <input type="text" class="form-control w-md" ng-model="navData.keyWord" placeholder="" required>                        
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Value </label>
          <div class="col-sm-10">
            <input type="text" class="form-control w-md" ng-model="navData.value" placeholder="" required>                        
          </div>
        </div>
      </div>
      <div class="modal-footer">                  
          <button class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" ng-disabled="addform.$invalid" ng-click="addNav()">Add</button>
      </div>
    </form>
  </modal>

Upvotes: 1

Views: 365

Answers (1)

sp00m
sp00m

Reputation: 48807

From https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state:

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

You have to use the name attribute to make the form instance available in the $scope, but you're using the id attribute:

<form name="addform" class="form-horizontal">
  <!-- ... -->
</form>

Upvotes: 1

Related Questions