Question

我有以下表格：

<form role="form" name="weightForm" ng-submit="save()">
  <div class="form-group">
     <label for="weight">Today's Weight</label>
     <input ng-model="post.weight" name="weight" ng-required="true"
         type="number" min="10" max="800" class="form-control"
         ng-pattern="/^[0-9]+(\.[0,5])?$/" step="0.5"
         placeholder="Enter your weight in lbs">
  </div>

以下是我的保存按钮的代码：

<button type="button" class="btn btn-primary" ng-click="save()"
      ng-disabled="weightForm.weight.$invalid">
Save</button>

此输入应该只接受整数并按以下格式浮动：n.0 or n.5 (see Regex)

当我输入一个未接受的值时，保存按钮会变灰并且无法保存输入的值。但是，我注意到，Enter Key有时可以跳过验证。例如，如果用户在12.中键入了验证，即使很难，保存按钮也会显示为灰色。

有没有人知道如何防止这种情况发生。

Answer 1

您需要检查表单中的对象数量。$ error。如果数字大于零，则退出提交功能。发生这种情况是因为您没有直接提交表单。

if(Object.keys(form.$error).length  > 0) {
    return false;
}

Answer 2

最后以这种方式解决了：

我宣布我的表格如下：

<form role="form" name="weightForm" ng-submit="save(weightForm)">

我的保存按钮为：

<button type="button" class="btn btn-primary" ng-click="submit()"
      ng-disabled="weightForm.weight.$invalid">

在我的控制器中：

只要用户点击Enter Key

，就会调用save方法

$scope.save = (weightForm) ->
  if weightForm.$error.pattern == undefined
  #If weightForm.$error.pattern == undefined, then there is no errors and content can be saved...

只要用户点击save按钮，就会调用submit方法：

$scope.submit = ->
#Button status depends on `ng-disabled`

输入键会跳过angularJS验证

2 个答案: