在提交表单或字段变脏时显示验证消息-提交时显示定制消息和默认验证消息

Diego Unanue 发表于 Dev

迭戈·乌纳努（Diego Unanue）

我在使用自定义消息时遇到两个问题：

首先，我第一次加载页面时会显示错误消息，我只想在提交表单或字段变脏（修改）时显示它们。

这是我的代码：

 <form class="form-horizontal name="newEventForm">
   <div ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert" >
   <div ng-message="required">You did not enter a field</div>
                                <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
   </div>
 </form>

我遇到的第二个问题是，当我提交表单时，它显示了两条消息，即自定义消息和默认要求消息。参见上图（您未输入字段是我的自定义消息）：

在此处输入图片说明

我想在表单有效时进行ajax调用

 $scope.ajaxSend = function (action, dataoSend, newEventForm) {
    if (newEventForm.$valid) {
        $.ajax({
            type: 'POST',
            url: "/" + _controller + "/" + action,
            contentType: 'application/json; charset=utf-8',                
            success: function (data) {
                $scope.table.reload();
            },
            error: function () {
            }
        });
    }
};

泰勒·克拉蒙德

为了防止默认验证，请尝试将novalidate属性添加到表单中：

<form class="form-horizontal name="newEventForm" novalidate>`

您可以利用$submitted表单的$dirty属性和每个字段的属性来有条件地显示消息。像这样：

<div ng-show="newEventForm.$submitted || newEventForm.Name.$dirty" ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。