按钮不是禁用使用ng-disabled

时间:2015-12-10 13:01:04

标签: javascript angularjs

您好我的表格,如果字段为空,我无法停用提交按钮。以下是代码可以帮助我理解什么可能是什么问题?

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

1 个答案:

答案 0 :(得分:1)

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

  

表单是一个实例   FormController。   可以选择使用表单实例将表单实例发布到范围内   name属性

您必须使用name属性在$scope中提供表单实例,但您使用id属性:

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