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>