Question

因此，我需要一个验证器来检查以确保我的password_confirmation字段与我的password字段匹配。我最终得到了以下指令：

指令

@app.directive 'matches', ->
  require: 'ngModel', #Needed for validation bits
  scope: { matched_value: '=matches' } #Looks up the value of the scope element we're matching against and keeps it bound
  link: (scope, elem, attrs, ctrl) ->
    ctrl.$parsers.unshift (view_value) -> #Add a new parser that updates the validity
      ctrl.$setValidity(elem.attr('name'), view_value == scope.matched_value)

表格

<form name="form">
  <input ng-model="new_user.password" name="password">
  <input ng-model="password_confirmation" name="password_confirmation" matches="new_user.password">
</form>

当用户从上到下使用表单时，此工作正常。但是，如果他们在填写password之后继续更改password_confirmation，那么它就不会像它应该的那样变得无效。

我的第一次尝试向匹配指令添加了$watch，但我似乎无法获得新password_confirmation输入的正确值。

指令w / Watcher（CoffeeScript）

@app.directive 'matches', ->
  require: 'ngModel', 
  scope: { matched_value: '=matches' }
  link: (scope, elem, attrs, ctrl) ->
    ctrl.$parsers.unshift (view_value) ->
      ctrl.$setValidity(elem.attr('name'), view_value == scope.matched_value)
    scope.$watch attrs['watches'], ->
      ctrl.$setValidity(elem.attr('name'), ctrl.$view_value == scope.matched_value)

但ctrl.$view_value总是未定义，让我相信我做错了。

我如何获得实际价值？这是建立这种反向关系的正确方法吗？有更好的方法吗？

Answer 1

https://github.com/wongatech/angular-confirm-field是一个很好的项目。

此处示例http://wongatech.github.io/angular-confirm-field/

下面的代码显示了具有已实现功能的2个输入字段

<input ng-model="email" name="my-email" />
<input ng-confirm-field ng-model="emailconfirm" confirm-against="email" name="my-email-confirm"/>

该指令与其他实现的不同之处在于它使用$ parsers和$ watch以确保仅在视图值有效时更新模型属性。

Answer 2

您可以从一个指令中查看这两个元素。通过功能观看。每个摘要，它将比较值而不是仅在一个元素发生变化时进行比较。

.directive('match', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
            match: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch(function() {
                var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
                return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.match === modelValue;
            }, function(currentValue) {
                ctrl.$setValidity('match', currentValue);
            });
        }
    };
});

使用(ctrl.$pristine && angular.isUndefined(ctrl.$modelValue))时，在触摸字段或其中包含某些内容（预填充）之前，不会添加错误。

更多信息：https://github.com/TheSharpieOne/angular-input-match

演示：http://jsfiddle.net/TheSharpieOne/Wnv8u/

对于angular 1.3.x版本，新的验证管道效果最好，这里是angular 1.3.x的版本

.directive('match', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
            match: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch('match', function(pass){
                ctrl.$validate();
            });
            ctrl.$validators.match = function(modelValue){
                return (ctrl.$pristine && (angular.isUndefined(modelValue) || modelValue === "")) || modelValue === scope.match;
            };
        }
    };
});

密码确认原点更改时的验证

2 个答案: