javascript - 每当页面重新加载时， Angular 消息就会出现并消失

Question

我有两条与一个文本字段关联的ng-messages，但我想要一条消息作为默认值 - 此字段是必填字段! 随页面加载而刷新/打开但第二个，即用户名包含至少 3 个字符仅应在文本框中输入至少一个文本时显示。

每当页面加载时，都会显示不需要的第二条消息，然后在页面完全加载时消失，如何删除它并使页面更加突出。

这是我正在尝试的代码

 <div class="errormsg" ng-messages="loginForm.username.$error">
 <div ng-message="required">This field is Mandatory!</div>
 <div ng-message="minlength">Username contains atleast 3 characters</div>
 </div>

建议我一种以 Angular 方式实现此目的的方法。

提前致谢。

Answer 1

您需要将 $pristine 与 $invalid 一起使用。请参见下面的示例。我使用 help-block 而不是 ng-message。您可以根据需要添加其他验证，例如最小长度、最大长度等。

<form name="contactUsForm" ng-submit="sendContactUsMessage();" novalidate>

                <div class="form-group" ng-class="{ 'has-error' : contactUsForm.name.$invalid && !contactUsForm.name.$pristine }">
                    <label for="name">Name<span class="glyphicon glyphicon-asterisk mandatory" aria-hidden="true" /></label>
                    <input type="text" name="name" class="form-control" placeholder="When were you born?" ng-model="message.name" ng-required="true">
                    <p ng-show="contactUsForm.name.$invalid && !contactUsForm.name.$pristine" class="help-block">Name is required.</p>
                </div>
</form>