0

I am trying to write some custom form validation. I have the directive working fine. It is being loaded. But I want to do live form validation. Meaning that while an input element is being typed in I want to make sure that its validated. I can not for the life of me seem to figure out how to get the results of this input form so that it can be seen by the directive.

package.js

define([
        'angular',
        'bb/checkout/form-validation/form-validation.directive'
    ],

    function defineFormValidationPackage(
        angular,
        formValidation
    ) {

        'use strict';

        var module = angular.module('checkout.form-validation', []);

        module.directive('cardFormValidation', formValidation);

        return module;
    }
);

form-validation.directive.js

define(function defineFormValidation() {
    'use strict';
    function formValidation() {

        return {
            restrict: 'C',
            scope: {
                addCardScope: '@'

            },
            link: function ($scope, $element, $attrs) {

                $scope.addCardScope = $scope.addCardScope || {};
                var city = $scope.addCardScope.city;

                $element.on('keypress', function(event) {
                    console.log("CITY: ", $scope.addCardScope);

                });
            }
        };
    }
    return formValidation;
});

HTML

<form id="ccForm" class="card-form-validation customer-address-form" name="ccForm" formid="ccForm" action="" method="post">
     <input id="city" type="text" class="validate" ng-model="addCardScope.city" maxlength="30" />
     <div>{{addCardScope.city}}</div>
</form>
0

You have an isolated scope that expects a addCardScope string binding, but you are not passing the binding to your directive in your template.

Would <form id="ccForm" class="card-form-validation customer-address-form" add-card-scope="someValue"> help?

Also, you seem to use addCardScope as an object, so the @ isn't what you want as that expects a string value. You likely want = binding instead?

Another curiosity is that since you are never passing in addCardScope from the outside, and making it an empty object if it isn't, addCardScope.city is never assigned and will always return undefined.

If you're looking to do custom form validation, the documentation has examples that could guide you in the right direction. The way you're trying it right now is not the best way to do it.

https://docs.angularjs.org/guide/forms#custom-validation

|improve this answer|||||
  • unfortunately, we are currently using angular 1.2.30 and are not at a point where it can be upgraded. I have looked at the form documents for 1.2.30 and it appears they are not doing it the way I am trying to accomplish this. – phelix Oct 21 '16 at 18:28
  • I have removed the directive from the form and decided maybe it would be cleaner to have a directive for each individual form element since each field will have different form validations. So the markup is now like so. <input id="city" type="text" class="validate bb-form-validation-city" ng-model="addCardScope.city" maxlength="30" /> <div>{{addCardScope.city}}</div> – phelix Oct 21 '16 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.