Question

我正在尝试创建一个包含提交和取消按钮的表单，以及使用AngularJS进行验证。

然而，验证行为有点时髦。我希望验证在viewValue上，但至少要推迟到按下提交按钮。目前，如果用户在未提交的情况下将文本输入框并模糊，则会因为modelValue仍为空而抛出验证错误。

我希望有一种方法可以在没有自定义指令或更改控制器的情况下执行此操作。该表单被设想为嵌套结构的一部分，因此理想情况下它是自包含的。

http://plnkr.co/edit/Upn3n4XM6GC1o4KigFnl?p=preview

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysql.sock' (111)

Answer 1

这篇文章讨论了使用指令进行表单验证的方法。

通常的做法是在表单完全有效之前阻止表单提交，这是一种糟糕的用户体验。这个可以带来更好的用户体验

http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

Answer 2

下面是一个示例，其中使用了“无自定义指令”，并且模板中的构建表单验证功能和控制器中的方法只有角度。它会对你有所帮助。

http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="userForm" novalidate>
      <label>
        First Name: <br/>
        <input name="firstname" type="text" ng-model="user.firstName" required><br />
        <span ng-show="userForm.firstname.$error.required && isSubmitted">Please enter First name<br /></span><br />
      </label>
      <label>
        Last Name: <br/>
        <input name="lastname" type="text" ng-model="user.lastName" required><br />
        <span ng-show="userForm.lastname.$error.required && isSubmitted">Please enter Last name<br /></span><br />
      </label>
      <button ng-click="submitUser()">Submit</button>&nbsp;<button>Cancel</button>
    </form>
    <pre>{{ user|json }}</pre>
  </body>

</html>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.isSubmitted = false;
  $scope.submitUser = function() {
    $scope.isSubmitted = true;
  };
});

AngularJS使用提交/取消按钮验证表单

2 个答案: