data-ng-disabled在表单中不起作用

时间:2015-02-17 17:48:31

标签: angularjs

我有一个这样的表格:

<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>

即使我把&#34; data-ng-disabled =&#34; newCheckForm。$ invalid&#34; &#34;在按钮中,由于始终启用了按钮保存,因此使用空字段触发服务器端验证。

感谢所有!!

1 个答案:

答案 0 :(得分:0)

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

您的表单声明中有novalidate,因此它不会验证,您的按钮将始终启用...删除novalidate以验证您的表单并禁用按钮。