如何强制ngMessages显示错误而不需要触摸输入

问题描述：

我正在开发多页面的web应用程序（不是Angular SPA）。在某些情况下，我必须渲染带有内嵌验证错误的页面（例如HTTP POST后失败的登录尝试）。我希望这些错误在页面加载时通过角度显示。我已经创建了自定义验证器（现在指令称为odd）。但它似乎让他们显示的唯一方法是从每个单独的输入字段模糊。如何强制ngMessages显示错误而不需要触摸输入

<md-input-container> 
    <label>Email</label> 
    <input name="j_username" type="email" ng-model="j_username" odd="false" md-autofocus /> 
    <div ng-messages="login.j_username.$error"> 
    <span ng-message="odd">Some error message prerendered on a server side</span> 
    </div>   
</md-input-container>

这里是一个链接codepen：http://codepen.io/anon/pen/RGRgoN 点击电子邮件，然后松焦点，你会看到错误消息出现。

问题是：如何强制角度在页面加载时显示窗体上所有字段的所有验证消息？

答

可能是一个快捷方式，但在将此setTimeout添加到我的自定义验证程序错误后，根据需要开始出现在页面加载中。如果有人知道更好的方式，请让我知道！

app.directive("hasVe", function() { 
    return { 
     restrict : "A", 
     require : "ngModel", 

     link : function(scope, element, attributes, ngModel) { 
      var hasVe = attributes.hasVe; 
      ngModel.$validators.hasVe = function(modelValue) { 
       return hasVe !== "true"; 
      }; 

      // NOTE: This looks like a shortcut, but it works 
      setTimeout(function() { 
       ngModel.$touched = true; 
       scope.$apply(); 
      }, 100); 
     } 
    }; 
});

这里是一个更新的摘要：http://codepen.io/anon/pen/RGRmpY

答

过这个问题，刚来到自己。这个线程是有帮助的：show validation error messages on submit in angularjs

你想要做的是添加ng-show =“登录。$提交”到您的ng-messages元素。 ng消息将仍然工作它以前的方式，如果输入已被“触摸”或修改，弹出错误消息，但它也增加了你想要的，这是如果用户尝试显示错误消息提交。

当用户尝试提交表单，角表单变量登录。$提交被设置为true（即使提交不成功）

<div ng-messages="login.j_username.$error" ng-show="login.$submitted"> 
    <span ng-message="odd">Some error message prerendered on a server side</span> 
</div>

此外，请务必在ngMessages您应用程序启动：https://docs.angularjs.org/api/ngMessages#module-installation

angular.module('app', ['ngMessages']);

如果您正在使用角料，这是绝对必需的。然后你甚至不需要使用ng-show =“登录。$提交”

如何强制ngMessages显示错误而不需要触摸输入

相关推荐