Question

我一直试图让表单验证在我的网络应用程序中运行一段时间，但没有任何运气。所以我尝试创建一个有效的JSFiddle，然后我可以将代码直接复制回我的应用程序。但是，我将代码直接从AngularJS Forms页面复制到JSFiddle中并且它不起作用...我已将最新的angular.min.js文件包含在小提琴中。有人可以让我知道我做错了吗？

HTML

    <div ng-controller="Controller">
  <form name="form" class="css-form" novalidate>
    Name:
      <input type="text" ng-model="user.name" name="uName" required /><br />
    E-mail:
      <input type="email" ng-model="user.email" name="uEmail" required/><br />
    <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
    </div>

    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />

    <input type="checkbox" ng-model="user.agree" name="userAgree" required />
    I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
              required /><br />
    <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>

    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)"
            ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>

  </form>
</div>

JS

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

function Controller($scope) {
  $scope.master = {};

  $scope.update = function(user) {
    $scope.master = angular.copy(user);
  };

  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };

  $scope.isUnchanged = function(user) {
    return angular.equals(user, $scope.master);
  };

  $scope.reset();
}

Answer 1

看起来你错过了ng-app =＆＃34; myapp＆＃34;

Answer 2

我也无法在JSFiddle中使用它，但在我的测试应用程序（VS 2013 with Angular 1.2.18）中，它适用于这个小改动：

app.controller('Controller', function($scope) {
$scope.master = {};

$scope.update = function(user) {
    $scope.master = angular.copy(user);
};

$scope.reset = function() {
    $scope.user = angular.copy($scope.master);
};

$scope.isUnchanged = function(user) {
    return angular.equals(user, $scope.master);
};

$scope.reset();
});

Answer 3

修复它而无需更改控制器代码或其他任何内容。包含正确的库以及运行Angular应用程序的基本步骤存在一些问题，这使得这在环境检查中成为一个很好的教训。

即：您忘了在jsfiddle中包含Angular库，我想，在您自己的环境中。如果你包含它和添加一个ng-app="myapp"包装器供Angular查找，它就可以了。

以下是更新的，有效的jsfiddle：http://jsfiddle.net/nHujk/

像这样的问题可能真的令人沮丧 - 我理解并且多次出现在我的代码逻辑似乎工作完美的情况下我发现某些库没有被包含或基本需求不是被填补我建议总是仔细检查你的“环境”，或者你的代码所在的环境。确保提供库，没有任何CDN问题，并且没有任何拼写错误抛出包含。

希望这有帮助！

PS：从一个像角度这样的大而且发展良好的项目中复制示例代码时，首先想到的是，如果它不起作用，你应该拥有的东西是你的环境中有什么东西会把它抛弃，因为Angular背后的团队像这样的项目极不可能将错误的示例代码排除在外。它发生了，但它比当地环境出现问题更不可能。

Angular Form Validation根本不起作用

3 个答案: