时间戳

首页 > 解决方案 > Angular js ng消息在初始化时显示错误

angularjs - Angular js ng消息在初始化时显示错误

问题描述

在我的项目中，我有 angularjs 1.5.10 和 ng-messages 1.5.10。我以简单的形式使用它：

<form class="form-horizontal" ng-submit="createBooking()" role="form" name="createBookingForm" novalidate>
    <div class="form-group">
                            <label for="payment_details_last_name" class="col-sm-3 control-label">Last name</label>
                            <div class="col-sm-6">
                                <input type="text"
                                       id="payment_details_last_name"
                                       name="payment_details_last_name"
                                       class="form-control"
                                       ng-model="payment_details.last_name"
                                       ng-required="true"
                                       ng-maxlength="30" />
                                <div ng-messages="createBookingForm.payment_details_last_name.$error" role="alert">
                                    <div ng-message="required">This field is required</div>
                                    <div ng-message="maxlength">Your field is too long</div>
                                </div>
                            </div>
                            <div class="col-sm-3"></div>
                        </div>
</form>

在控制器中：

$scope.members = [{
      'first_name': '',
      'last_name': '',
      'email': '',
      'phone_number': '',
      'date_of_birth': '',
    }];

最初我总是看到错误This field is required。我试图在控制器中创建空对象：

$scope.createBookingForm = {};

我也在初始化后显示表单<div ng-if="initialized">

没有任何工作。使用角种子骨架的项目

我看到了像 if $touched else 这样的肮脏黑客，但我想了解什么是错的......

标签： angularjsng-messages

解决方案

没有任何问题，请查看官方指南中的示例。他们required默认显示错误。乍一看似乎是错误的，但这是处理这种情况的唯一正确方法。

所以基本上，ng-messages 完全按照文档所说的：

ngMessages 是一个指令，旨在根据它所侦听的键/值对象的状态显示和隐藏消息。

该指令实时工作并显示当前输入状态的错误，这是有道理的。因此，如果您不希望默认显示任何消息，您应该使用一些方法，讨论了数百次

如何使必填字段的 ngMessage 仅在脏或提交表单时显示？

Angular：提交点击时的ng-message验证

AngularJS：隐藏 ng-message 直到点击表单提交按钮

AngularJS 1.5.6 重置表单和 ng-messages

如果您需要其他一些改进的行为 - 目前没有快速的解决方案，您必须提出适合您需求的自己的验证引擎。

推荐阅读