Question

我是一个较新的角色用户，我尝试对表单进行验证。我在这里找到了一个例子： http://plnkr.co/edit/gLDFaf?p=preview

这正是我想要的......所以我的问题是什么:) 我不明白为什么验证（红色边框）如果我添加＆＃34;使用严格＆＃34 ;;在script.js的顶部

"use strict";  // <-- validation doesn't work if removed
module = angular.module('app', []);

module.controller('NewUserController', function($scope) {
  $scope.save = function() {
    if ($scope.userForm.$valid) {
      alert('User saved');
      $scope.reset();
    } else {
      alert("There are invalid fields");
    }
  };

  $scope.reset = function() {
    $scope.user = { name: '', email: '' };
  }
});

观点：

 <body ng-app="app" ng-controller="NewUserController">
    <h1>Add New User</h1>
    <form name="userForm" novalidate>
      <div class="form-group" ng-class="{ 'has-error': userForm.name.$invalid }" >
        <label class="control-label">Name</label>
        <input type="text" class="form-control" name="name" ng-model="user.name" required placeholder="Name" />
      </div>
      <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid }" >
        <label class="control-label">Email</label>
        <input type="email" class="form-control" name="email" ng-model="user.email" required placeholder="Email" />
      </div>
      <button class="btn btn-primary" ng-click="save()">Add User</button>
      <button class="btn btn-link" ng-click="reset()">Reset</button>
    </form>
  </body>

有人可以解释一下吗？

Answer 1

如果您查看浏览器的控制台，您会看到JS代码实际崩溃，因此您的JS代码都没有活动;所以没有Angular验证，表单只是以标准的HTML行为提交自己。

JS崩溃的原因是您无法在严格模式下创建全局变量。您的module变量声明时没有var语句，这通常会使其成为全局变量。添加var语句可使您的代码正常工作。

"use strict";
var module = angular.module('app', []); // The variable is properly defined

您可以在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Converting_mistakes_into_errors

Answer 2

在开头添加var

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

app.controller('NewUserController', function($scope) {

检查更新的plunker

Angularjs：ng-class和表单验证

2 个答案: