I'm trying to add an errors to my floating placeholder labels when certain conditions are met in my controller

However, I'm not sure the best way to go about this and my current implementing doesn't seem to be detecting the attribute change in the directive (custom-error stays set to "test").

Here's what I've got right now:

HTML:

<input type="password" float-placeholder
       custom-error="test" placeholder="Confirm password"
       required name="passwordSecond" id="passwordSecond"
       ng-model="vs.PasswordSecond" />

Directive:

angular.module('myApp').directive('floatPlaceholder', function ($window) {
  return {
    restrict: 'A',
    scope: {
      customError: '@'
    },
    link: function (scope, element, attrs) {
      element.after("<label class='floating-placeholder'>" + attrs.placeholder + "</label>");
      var label = angular.element(ele.parent()[0].getElementsByClassName('floating-placeholder'));

      element.on('blur', function() {
        if (ele.val().length > 0) { 
          if (scope.customError) {
            label.text(attrs.placeholder + ' - ' + scope.customError);
          }
        }
      }
    }
  };
});

Controller:

angular.module('myApp').controller('SignupController', function factory() {
  _this.confirmPassword = () => {
    if(_this.PasswordFirst !== _this.PasswordSecond){
      angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);
    }
  }
});

I'm using Angular 1.6

标签： angularjs angularjs-directive angularjs-ng-model angularjs-ng-form

3条回答

太酷不给撩

2楼-- · 2019-08-12 06:19

(I'm basing this on you saying 'custom-error stays set to "test"')

custom-error is looking for a variable of "test", not a string value of "test". Have you tried setting a variable test in your controller and updating that?

0人赞添加讨论(0) 举报

放我归山

3楼-- · 2019-08-12 06:43

Validator Directive which Matches Passwords

To have a form match password inputs, create a custom directive that hooks into the ngModelController API ($validators):

app.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})

For more information, see AngularJS Developer Guide - Forms - Modifying Built-in Validators

The DEMO

angular.module("app",[])
.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <form name="form1">
        <input type="password" name="password1" required
               placeholder="Enter password"
               ng-model="vm.password1" />
        <br>
        <input type="password" name="password2" required
               placeholder="Confirm password"
               ng-model="vm.password2"
               match-with="vm.password1"
               ng-model-options="{updateOn: 'blur'}" />
        <br>
        <p ng-show="form1.password2.$error.match">
          Passwords don't match
        </p>
        <input type="submit" value="submit" />
    </form>
  </body>

0人赞添加讨论(0) 举报

Juvenile、少年°

4楼-- · 2019-08-12 06:43

Had a look at your code. Have you defined the scope variables in the SignUpController

_this.PasswordFirst and _this.PasswordSecond

Also this line in your controller

angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);

good suggestion would be to implement this in the directive as attributes can be accessed correctly in the directive

0人赞添加讨论(0) 举报

Passing Information to Directive to Match Password

Validator Directive which Matches Passwords

The DEMO

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间