javascript - AngularJs ng-消息无法正常工作

标签 javascript html angularjs ng-messages

我正在尝试在 AngularJs 1.6.4 中使用 ng-messages 进行验证。

但只要我在表单中输入,它就会显示所有 3 条 ng 消息,之后它们不会消失,直到页面刷新。因此,即使未达到最大长度,它也会显示“需要您的姓名”。

<form name="userForm" ng-submit="signup(userForm.$valid)" novalidate>

    <!-- First name -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid }">

      <label for="example-text-input" class="col-2 col-form-label">First Name</label>
      <div class="col-10">

        <input class="form-control" type="text" placeholder="Please enter your first name"
            name="first_name"
            ng-model="user.first_name"
            ng-minlength="2"
            ng-maxlength="25"
            required>

        <div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
            <p ng-message="minlength">Your name is too short.</p>
            <p ng-message="maxlength">Your name is too long.</p>
            <p ng-message="required">Your name is required.</p>
        </div>

      </div>
    </div>
</form>

编辑

通过将 ngMessages 添加到我的模块并在我的 index.html 中添加脚本标签解决了这个问题

最佳答案

您的代码非常适合我。检查plunker链接

在你想要的模块中注入(inject) ngmessage

angular.module('app', ['ngMessages'])

在您的项目中添加 Angular 消息文件。

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular‌​-messages.js"></scri‌​pt>

关于javascript - AngularJs ng-消息无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43558497/

相关文章:

javascript - 如何将变量作为键传递到 javascript unshift/push 中?

javascript - 如何在 Javascript 中将文本文件中的段落作为单个字符串读取?

javascript - 我该怎么做才能将此菜单按钮从侧边栏移到右侧?

javascript - 如何获取 Jquery bootgrid 中所有选中复选框的所有 ID?

javascript - 如何使用 Angular JS 访问 JSON 中的嵌套对象

javascript - 如何根据 Hammer.js pan 设置 translateX 的样式?

javascript - Vuejs 使用 postmessage 从 iframe 接收事件

javascript - 为什么 ng-options 指令需要 ng-model

html - dragover 上的浏览​​器响应 - html5 拖放

javascript - 如何计算 javascript 数组中某个值的实例数并声明获胜者