Question

我正在尝试禁用保存按钮，直到未选择日期。它已被禁用，但它无法使用，直到我不按键盘上的任何键。请告诉我我做错了什么，并提前感谢。

<div class = "form-group" ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
    <label for = "fromTime"> From Time:
        <img src = "images/required.gif" alt = "Required" class = "required-star">
    </label>

    <div class='input-group date' id='fromTime'  >
        <input type='text' class="form-control" name="fromTime" ng-model = "fromTime" required />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
    </div>
    <p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine" class="help-block">From Time is required.</p>
</div>

<button type="button" class="col-sm-2 btn btn-primary" ng-click="scheduleCall()" style="margin-left:10px;" ng-disabled="Form.$invalid"> Save </button>

Answer 1

变化：

ng-disabled="Form.$invalid"

为：

ng-disabled="Form.fromTime.$invalid"

Answer 2

你必须使用如下

ng-disabled="Form.fromTime.$invalid"

表格名称：表格; 输入字段名称：fromTime; 输入字段状态：$ invalid

Answer 3

如果我正确理解您的问题，您需要使用date输入。

现在save按钮将被禁用，直到选择了有效日期。

function Ctrl($scope) {
  $scope.fromTime = '';

  $scope.scheduleCall = function() {};

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Ctrl">
    <form name="Form">
      <div class="form-group" 
           ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">

        <label for="fromTime">From Time:</label>

        <div class='input-group date' id='fromTime'>
          <input type='date' class="form-control" name="fromTime" ng-model="fromTime" required />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine" 
           style="font-size: 11px; color: red;">
          From Time is required.
        </p>
      </div>

      <button type="button" ng-click="scheduleCall()" ng-disabled="Form.$invalid">Save</button>
    </form>
  </div>
</div>

验证日期字段

3 个答案: