data-ng-disabled does not work in a form

Question

I have a form like this:

<form class="form-horizontal" role="form" name="newCheckForm" novalidate data-ng-submit="create()">
  <div class="widget-header">
    <i class="fa fa-connectdevelop">New</span>
  </div>
  <div class="widget-body xlarge">
    <div class="form-group has-feedback" data-ng-form="subForm" data-ng-repeat="key in notSorted(checkInfo)" data-ng-init="value = checkInfo[key]" data-ng-if="key!='locations'">
      <label class="col-sm-4 control-label" for="formCheckInputSmall{{$index}}">{{formatLabel(key)}}</label>

      <div  class="col-sm-7">

        <div class="input-group" data-ng-if="key=='url'">
          <span class="input-group-addon">{{isHttps ? 'https://' :'http://'}}</span>
          <input class="form-control" type="url" required name="urlInput" id="formCheckInputSmall{{$index}}" data-ng-model="checkInfo[key]" value="{{fixURL(value)}}"> <span class="input-group-addon">
            <input type="checkbox" data-ng-model="isHttps">https
          </span>
        </div>

 <div class="input-group" data-ng-if="key=='frequency' || key=='healthyThreshold' || key=='unhealthyThreshold' || key=='timeout' || key=='maxReminders' || key=='nrReminders' || key=='remindEvery'">
          <input class="form-control" type="number" name="numericInput" min="0" id="formCheckInputSmall{{$index}}" data-ng-model="checkInfo[key]" value="{{value}}" required>
          <div class="help-block text-danger" data-ng-show="subForm.numericInput.$dirty && subForm.numericInput.$invalid">
            <small class="data-ng-message" data-ng-show="subForm.numericInput.$error.number">Error</small>
            <small class="data-ng-message" data-ng-show="subForm.numericInput.$error.required">Error</small>
          </div>
        </div>

        <div class="col-sm-offset-0 col-sm-12" class="input-group" data-ng-if="key=='allowRedirects' || key=='enabled' || key=='notificationsEnabled' ">
          <div class="checkbox">
            <input type="checkbox" id="formCheckInputSmall{{$index}}" data-ng-model="checkInfo[key]" value="{{value}}">
          </div>
        </div>

        <div class="input-group" data-ng-if="key=='method'">
          <select class="form-control" data-ng-model="checkInfo[key]" data-ng-options="method for method in methods" required name="methodInput">
          <option value="">Options</option>
          </select>
          <div class="help-block text-danger" data-ng-show="subForm.methodInput.$error.required">
            <small class="data-ng-message">Error</small>
          </div>
        </div>

        <div class="input-group" data-ng-if="key=='statusCodes' || key=='recentlyDownAt' || key=='state'">
          <input class="form-control" type="text" id="formCheckInputSmall{{$index}}"  data-ng-model="checkInfo[key]" value="{{value}}">
        </div>

        <div class="input-group" data-ng-if="key=='name'">
          <input class="form-control" type="text" name="nameInput" id="forCheckInputSmall{{$index}}" data-ng-model="checkInfo[key]" value="{{value}}" required>
          <div class="help-block text-danger" data-ng-show="subForm.nameInput.$invalid">
            <small class="data-ng-message" data-ng-show="subForm.nameInput.$error.required">Error</small>
          </div>
        </div>
  </div>            
    </div>
  </div>
    <div class="widget-footer">
    <button type="submit" data-ng-disabled="newCheckForm.$invalid" class="btn btn-sm pull-right btn-success">Save</span></button>
    <button class="btn btn-sm btn-danger pull-right" data-ng-click="clear()">Clear</button>
    <div class="clearfix"></div>
  </div>
</form>

Even though I put "data-ng-disabled="newCheckForm.$invalid" " in the button, the server side validation gets triggered with empty fields due the button save is always enabled.

Thanks to all!!

thats a lot going on.but one thing is that doing repeats for form inputs is tricky. does this help? http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular — jw56578, Feb 17 '15 at 18:05

score 0 · Accepted Answer · answered Apr 27 '15 at 09:21

<form class="form-horizontal" role="form" name="newCheckForm" novalidate data-ng-submit="create()">

you have novalidate in your form declaration, so it will not validate and your button will always be enabled... remove novalidate inorder to validate your form and disable button.

data-ng-disabled does not work in a form

1 Answers1