表单无效时在 Angular 中显示错误答案

【问题标题】：Display errors in Angular when form invalid表单无效时在 Angular 中显示错误
【发布时间】：2014-06-29 19:10:58
【问题描述】：

Angular 中是否有一种自动方式来显示无效表单的错误消息。例如，我有以下内容。它确实运作良好，因为它不允许用户提交，但它不会给用户任何自动反馈来告诉他们需要元素。如果表单在提交时无效，是否有一种自动方法让它打印字段是必需的消息？

           <div class="form-center">
    <form name="loginform" class="forms" ng-controller="controllers.LoginController">
        <fieldset>  <legend><h3>Account Login</h3></legend>

            <div class="advanced-search-item">
                <label>Username:</label><br /> <input type="text" ng-model="username" name="username" placeholder="username" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>

            </div>

            <div class="advanced-search-item">
            <label>Password:</label><br /> 
                <input type="password" name="password" ng-model="password" placeholder="password" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
            </div>


             <div class="advanced-search-item">
                 <a href="#" class="advanced-search-button submit-button" ng-disabled='!loginform.$valid' ng-click="submitted=true;loginUser()">Login</a>
            </div>


        </fieldset>
    </form>
    </div>

【问题讨论】：

标签： angularjs

【解决方案1】：

您必须添加一些跨度以在输入字段旁边显示错误，如下所示

<span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>

<span class="error" ng-show="submitted && loginform.password.$error.required">Required!</span>

希望您可以将此文本保持为红色，下面是 CSS

.error {
    padding-left:10px;
    color: #F00;
}

提交表单时，如果有错误，它将显示在跨度上方

希望对你有帮助

【讨论】：

当我最初进入表单时，提交的变量似乎已经设置为 true ......所以 span 立即显示......我的设置有问题吗？
您在控制台中看到了什么错误？另外你需要在点击登录链接时设置submitted=true;like ng-click="submitted=true;loginUser()"，你是否正确添加了angualar.js链接？
实际上，上面更正后的代码现在会发生什么，它只是提交表单，并没有禁用提交按钮......控制台中根本没有错误。