Question

在我的项目中，我有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">

后的表单

什么都没用。使用angular-seed骨架的项目

我看到了肮脏的骇客，例如是否碰到了其他东西，但我想了解出什么问题了……

Answer 1

这没什么不对，请查看official guide中的示例。它们默认显示required错误。乍一看似乎是错误的，但这是处理这种情况的唯一正确方法。

因此，基本上，ng-messages完全符合文档所说的：

ngMessages是用于显示和隐藏消息的指令基于它侦听的键/值对象的状态。

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

How to make ngMessage for required fields only show when dirty or submitting a form?

Angular : ng-message validation on submit click

AngularJS: Hiding ng-message until hitting the form-submit button

AngularJS 1.5.6 reset form & ng-messages

如果您需要其他改进的行为-目前尚无快速解决方案，则必须提出自己的验证引擎来满足您的需求。

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

1 个答案: