如何实现指令来验证另一个字段(angularjs中的自定义表单)

时间:2014-04-08 08:42:03

标签: forms angularjs validation angularjs-directive custom-validators

我有一个验证自定义表单,我在select和textarea中使用 validate-message-character =“{{compose.limitCharacter - compose.message.length}}”

            <form class="form-horizontal" role="form" name="composeForm" >

            <select ng-change="limitComposeCharacter()" ng-selected="compose.profile" 
             ng-model="compose.profile" ng-options="userId in profiles" name="profile" 
             validate-message-character="{{compose.limitCharacter - compose.message.length}}" required>
            </select>

               number Character: {{compose.limitCharacter - compose.message.length}}

            <textarea class="form-control" ng-model="compose.message" name="message" 
    validate-message-character="{{compose.limitCharacter - compose.message.length}}" 
required></textarea>
              Form validity: {{composeForm.$valid}}

我有这样的事情:

  • 1°选择User has compose.limitCharacter = 100
  • 2°选择用户有compose.limitCharacter = 200等等。

这是我的指令,用于检查数字字符是&gt; 0

angular.module('App')
  .directive('validateMessageCharacter', function () {
    return {
      require: 'ngModel',
      link: function postLink(scope, element, attrs, c) {
        scope.$watch(attrs.ngModel, function() {
            console.log(attrs.validateMessageCharacter);
            if(attrs.validateMessageCharacter < 0)
            {
                c.$setValidity('maxCharacter', false);
                c.$invalid = true;
            }else{
                c.$setValidity('maxCharacter', true);
                c.$invalid = false;
            }

        });
      }
    };
  });

在不更改textarea的情况下更改选择时,它不起作用 一些建议?

1 个答案:

答案 0 :(得分:2)

首先,使用角度google组的建议,我更改了范围。$ watch to attr。$ observe。 其次,仅在键入文本后验证的原因是文本区域是必填字段。 您的代码在这里工作: http://plnkr.co/edit/YvsuLoHzX9eqb7FhDgXA?p=preview