标签: ng-messages

我动态创建输入并希望验证它们中的每一个,但是无法将ng-messages属性正确地设置为动态生成的字段名称属性.

<input ng-model="sub.name" name="subName{{$index}}" class="form-control" placeholder="name" required maxlength="20" />
         <div class="field-error" ng-messages="form.subName{{$index}}.$error" ng-show="form.Name.$touched" role="alert">
               <div ng-message="required">Name is required.</div>
          </div>

我在第二行遇到问题,我将ng-messages动态设置为ng-messages.我怎样才能做到这一点？

情况:

我正在使用ng-messages指令在我的角度应用程序中进行即时验证.一切都很好,除了一件事:我需要验证字段'密码确认',不知道该怎么做.

代码:

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label> …

我有一个Angular表格.使用该ng-pattern属性验证字段.我也有一个重置按钮.我正在使用Ui.Utils Event Binder来处理这样的reset事件:

<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

正如您所看到的,当表单重置时,它会调用表单上的reset方法$scope.这是整个控制器的样子:

angular.module('app').controller('mainController', function($scope) {
    $scope.resetCount = …

我正在使用角度消息在我的角度应用程序上显示表单验证错误.根据文档,我构建了以下代码

<form name="loginForm">
  <label class="item item-input">
    <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
  </label>
  <div ng-messages="loginForm.email.$error" style="color:maroon">
    <div ng-message="required">Please input a valid e-mail address</div>
    <div ng-message="email">You did not enter your email address correctly...</div>
  </div>
</form>

我在我的javascript中包含了ngMessages指令,并导入了angular-messages.js文件.

不幸的是,这两条消息一直在显示.无论我在输入字段中输入什么,无论是否是有效的电子邮件.这两条消息始终显示.如果我尝试只包含一个ng-message,结果是一样的.

我能做错什么？

编辑:如果我的描述不是很清楚,这是结果的打印 https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

我在angularjs中编写Web应用程序并使用角度材料(不确定这是否与问题相关)和ngMessages为用户提供无效输入的反馈.

通常,为了验证所提供的指令,我可以通过类似于以下的方式进行验证:

<md-input-container>
    <input required name="myInput" ng-model="someModel">
    <div ng-messages="formName.myInput.$error">
        <div ng-message="required">This field is required.</div>
    </div> 
</md-input-container>

但是如果我创建了自己的自定义指令......

moduleName.directive('ngCustomdir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModel){
            //do some validation
            return validation; //<--true or false based on validation
        }
    };
}

并将其包含在我的输入中......

<input required ng-customdir name="myInput" ng-model="someModel">

我知道它会验证输入,因为如果根据我的自定义指令验证输入无效,则字段变为红色且$ invalid值设置为true,但我不知道如何根据何时使用ngMessages显示消息有时候是这样的.

<div ng-messages="formName.myInput.$error">
    <div ng-message="required">This field is required.</div>
    <div ng-message="customdir">This is what I need to appear.</div>
</div>

当我的自定义指令验证无效时,我似乎无法显示消息.我该怎么做呢？我在这里先向您的帮助表示感谢.

我没有做任何太特别的事情.

我有一个输入,我希望每次击键都有效.如果验证失败,则显示错误.不要等待模糊事件触发$ touch.

我认为这是默认情况,但显然不是.我使用角度材料和角度消息.我正在为封锁检测这样做.

标记:

<form name="primaryLogin" novalidate>
    <md-content layout-padding layout="column">
        <md-input-container flex>
            <label>Login ID</label>
            <input type="text" required="" name="login" ng-model="primary.loginID" capslock>

            <div ng-messages="primaryLogin.$error">
                <div ng-message="required">
                    Please enter a Login ID.
                </div>

                <div ng-message="capslock">
                    Caps Lock is ON!
                </div>
            </div>

            <pre>{{ primaryLogin | json }}</pre>

        </md-input-container>

    </md-content>
</form>

当我第一次来到页面,打开大写锁定,并开始输入,我的错误消息如下所示:

{
  "$error": {
    "capslock": [
      {
        "$viewValue": "Q",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": …

不知道为什么我收到以下消息.还有其他人在AngularJS/Angular Material中遇到过这种情况吗？我究竟做错了什么？消息本身似乎有点模糊.

mdInput messages show animation called on invalid messages element:
md-input-container.md-block.md-icon-right.md-default-theme.md-input-has-value

来自AngularJS示例的简单输入:

<body ng-controller="myappCtrl">
<form name="myForm">
  <label>Enter your number:</label>
  <input type="number" name="myNumber" ng-model="name" min="{{minvalue}}" max="{{maxvalue}}"/>
  <pre>myForm.myNumber.$error = {{ myForm.myNumber.$error | json }}</pre>
  <pre>myForm.$valid = {{ myForm.$valid | json }}</pre>

  <div ng-messages="myForm.myNumber.$error" style="color:red">
    <div ng-message="number">You did not enter a valid number</div>
    <div ng-message="min">Your field value is lesser minimum value</div>
    <div ng-message="max" translate="FORM.MAXVALUE"></div>
  </div>

</form>

链接到plnkr

输入高于5的值时,应显示已翻译的错误消息.当我使用translate指令时,它不起作用.

OP更新

我已经找到了问题,现在这个问题已经关闭了.有一天会喜欢在这里找到发布解决方案的时间.

我在Angular Bootstrap选项卡上的ng-form中使用ngMessages时遇到了一些问题.更复杂的是,我正在验证的是Angular Bootstrap datepicker.所以代码如下,正如你所看到的,我在一个选项卡上的ng-form上有一个日期选择器.

<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
    <ng-form name="{{tabs[5].form}}">
        <div class="col-md-9">
        ...     
            <div class="col-md-6">
                <h4>Add Followup</h4>
                <div class="form-group">
                    <label for="addFollowupDate" class="control-label">Date:</label>                    
                    <div class="input-group">
                        <input type="text" id="addFollowupDate"
                               class="form-control"
                               uib-datepicker-popup="{{format}}"
                               ng-required="true"
                               ng-model="newFollowup.date"
                               is-open="addFollowupPopup.opened"
                               datepicker-options="dateOptions"
                               close-text="Close"
                               alt-input-formats="altInputFormats" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
                        </span>
                        <div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
                            <div ng-message="required">This field is required</div>
                        </div>
                    </div>
                </div>      

我已使用以下行将该表单分配给作用域:

$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');

并且我已成功设置控件以触及提交,这会使边框变为红色:

if ($scope.followupsForm.$invalid) {

    angular.forEach($scope.followupsForm.$error, function (formErrorField) {
        angular.forEach(formErrorField, function (errorField) {
            errorField.$setTouched(); // …

我正在使用ng-messages来验证我的注册表单字段，但是我遇到了一个问题，我无法检查用户名是否被占用，直到我将注册请求发送到服务器。目前我有这种类型的代码：

UserPool.signUp(vm.form.username, vm.form.password, attributes)
    .then(function (result) {
        $state.go('app.pages_auth_confirm', {
            user: result.user
        });
    })
    .catch(function () {
        $scope.registerForm.username.$invalid = true;
        $scope.registerForm.username.$error.usernameAlreadyExists = true;
    });

和 HTML：

<input name="username" ng-model="vm.form.username" placeholder="Name" required>
<div ng-messages="registerForm.username.$error" role="alert">
    <div ng-message="required">
        <span>Username field is required</span>
    </div>
    <div ng-message="usernameAlreadyExists">
        <span>User with this username already exists</span>
    </div>
</div>

这有效，但我想知道实现该功能的正确方法。注册表还有许多其他字段，手动更改其中一些字段以显示错误似乎不是一个好主意。我还对 angular 中的验证和消息进行了一些研究，并发现了自定义验证，$asyncValidators但我也不能使用该功能，因为据我所知，我将需要某种 API 来获取有关已用用户名的信息，但是我没有这种可能性，正如我已经说过的，在我发送注册请求之前，我无法检查用户名是否被占用。所以有人能告诉我我该怎么办吗？使用这种验证的正确方法是什么？