输入键跳过 angularJS 次验证

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

时调用保存方法

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

每当用户点击 save 按钮时调用提交方法：

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

输入键跳过 angularJS 次验证

Enter key skips angularJS validations

validation

enter

coffeescript

angularjs