AngularJS 中的验证不起作用答案

【问题标题】：Validation in AngularJS is not workingAngularJS 中的验证不起作用
【发布时间】：2015-09-11 11:15:38
【问题描述】：

我有一个表单，其中我使用 Bootstrap 添加了两个文本字段。现在我尝试为这两个字段添加 AngularJs 验证，但无法做到。这是我的 userId 文本字段的标记。

    <form role="form" name="Loginform" action="" method="post" class="registration-form">
    <div class="form-group">
    <label class="sr-only" for="UserID">User ID</label>
    <input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
    <span style="color:red" ng-show="Loginform.user.$dirty && myForm.user.$invalid">
    <span ng-show="Loginform.user.$error.required">Username is required.</span>
    </span>
    </div>
    </form>

请帮我解决这个问题..谢谢..

【问题讨论】：

Loginform.user.$dirty && myForm.user.$invalid 甚至没有针对两种检查的相同表单。
name="user" 在哪里，用户名的输入字段在哪里？你有Loginform.user.$dirty 的name="UserID" 和验证，我的理解应该是Loginform.UserID.$dirty。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

你能看到我更新了代码并做了一些更正吗 http://jsfiddle.net/v7je78gq/

<span style="color:red" ng-show="Loginform.$dirty && Loginform.$invalid">
<span ng-show="Loginform.$error.required">Username is required.</span>
</span>

这是因为您正在检查表单中不存在的属性希望对你有帮助

【讨论】：

【解决方案2】：

如果您想验证一个或多个输入字段，最好的方法是创建一个控制器并调用它。

function Ctrl($scope) {
  $scope.isInvalid = function(field){
    return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
  };
  $scope.isValid = function(field){
    return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
  };
}

<!DOCTYPE html>
<html ng-app>
  <head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  
  <body ng-controller="Ctrl">
    <form name="myForm" novalidate class="form-horizontal">
      <div class="control-group" ng-class="{error: isInvalid('name')}">
        <label>Name:</label>
        <input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
        <span ng-show="!isValid('name')">Name is required</span>
      </div>
      
    </form>
  </body>
  
</html>

希望它对你有用:)

【讨论】：

【解决方案3】：

您的输入字段的名称是 UserID 而不是用户。

ng-show="Loginform.UserID.$error.required"

【讨论】：

【解决方案4】：

您的输入名称与验证元素没有正确对应

<form role="form" name="Loginform" action="" method="post" class="registration-form">
                        <div class="form-group">
                        <label class="sr-only" for="UserID">User ID</label>
                        <input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
                        <span style="color:red" ng-show="Loginform.UserID.$touched && Loginform.UserID.$invalid">
                        <span ng-show="Loginform.UserID.$error.required">Username is required.</span>
                        </span>
                        </div>
                    </form>

【讨论】：

只有代码的答案不是很有用。请edit回答解释对代码所做的更改以及他们回答问题的原因。此外，请说明此答案与其他答案有何不同。