角度验证不起作用

Question

我在 html 页面上使用角度验证，我在其中定义了一个表单以及表单上的验证。但是，当我运行该页面时，我在该页面上使用的所有验证都是可见的。有没有办法隐藏所有验证？

 <form ng-controller="validateCtrl"
       name="loginForm" novalidate>

    <p>UserName:<br>
        <input type="text" name="uName" ng-model="uName" required>
  <span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid && loginForm.uName.$error.required">
      Username is required
  </span>
    </p>

    <p>Password:<br>
        <input type="text" name="pwd" ng-model="pwd" required>
  <span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
    <span ng-show="loginForm.pwd.$error.required">Password is required.</span>
  </span>
    </p>

    <p>
        <input type="submit" ng-click="popupuser()"
               ng-disabled="loginForm.$invalid ">
    </p>

</form>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>

Answer 1

您的表单代码很好，请参阅此处http://jsbin.com/figuve/1/edit

确保您的

validateCtrl

存在，否则验证将不起作用，请参阅此处 http://jsbin.com/figuve/2/edit

或

如果不需要，请从表单中删除

ng-controller="validateCtrl"

。 请参阅此处http://jsbin.com/figuve/3/edit

Answer 2

您可以尝试使用变量来检查表单是否已提交，就像这样

 <span ng-show="(loginForm.uName.$dirty || isSubmitted) && loginForm.uName.$error.required">Username is required</span>

Answer 3

构建了可重用的验证框架。你可以经历这个。

https://github.com/SwamyKallem/validation_error_angular_framework