Question

我想知道为什么当用户第一次查看我的表单时，我的required消息没有隐藏在加载中？

我的代码是：

<div ng-messages="loginForm.username.$error" class="form-input-error">
                <div class="message" ng-message="required">Please enter your username</div>
                <div class="message" ng-message="maxlength">Username is too long.</div>
            </div>

ng-message="maxlength"在满足要求之前不会出现，但我不明白为什么需要在加载时显示？

理想情况下，如果用户尝试提交没有输入字段的表单或者只输入了一个字段，我希望显示所需的消息。基本上，满足所需的验证规则。

这是一个JSFIDDLE示例

Answer 1

这是因为角度验证将评估表单是否满足加载要求，并且由于所需字段中没有值，因此它无效。由于用户名是0个字符，因此它小于maxlength，因此有效。

默认情况下，ng-messages angular仅显示第一条无效的消息。在这种情况下，这很好。

要阻止在单击提交之前显示的消息，您可以在提交时设置范围属性，并在ng-messages上使用ng-show仅在提交时显示验证消息：

$scope.submitForm = function(isValid) {
    $scope.submitted = true;
    // Check to make sure the form is completely valid
    if (isValid) {
        alert('Form is valid');
    }
};

<form name="loginForm" ng-controller="LoginCtrl" novalidate="novalidate" ng-submit="submitForm(loginForm.$valid)">
<div ng-messages="loginForm.username.$error" class="form-input-error" ng-show="submitted">
    <div class="message" ng-message="required">Please enter your username</div>
    <div class="message" ng-message="maxlength">Username is too long.</div>
</div>

JsFiddle

AngularJS |需要登录ngMessage

1 个答案: