I was just wondering if this was the accepted convention to doing something like this?
http://float-middle.com/multiple-fields-validation-in-angularjs/ I have done it a bit more simply and the byproduct is that trying to access formName.controlName.$dirty never gets updated when the values change. I was thinking of doing something like this. But it feels a little dirty and was wondering if there was a better way? *The markup:* Expiry date<br /> <div data-card-expiration name="creditCardExpiration" data-ng-model="creditCardExpiration"></div> *The code:* 'use strict'; interface ICreditCardExpiryScope extends ng.IScope { cardExpiration: CreditCardExpiration; selectedYear: string; currentYear: any; currentMonth: any; monthList: string[]; yearList: string[]; } angular.module('myApp.directives') .directive('cardExpiration', ['$parse', ($parse: ng.IParseService) => { return { restrict: 'A', require: 'ngModel', replace: true, scope: { cardExpiration: '=ngModel' }, template: '<div><select class="month" name="cardExpirationMonth" data-ng-model="cardExpiration.month" required> <option disabled selected value="">Month</option><option ng-repeat="month in monthList" value="{{$index+1}}" >{{$index+1 | leadingZero}} - {{month}}</option></select><select class="year" name="cardExpirationYear" data-ng-model="cardExpiration.year"><option disabled selected value="">Year</option><option ng-repeat="year in [] | range:currentYear:currentYear+5">{{year}}</select></select></div>', link: ($scope: ICreditCardExpiryScope, element: JQuery, attrs: ng.IAttributes, modelController: ng.INgModelController) => { $scope.currentMonth = moment().month(); $scope.currentYear = new Date().getFullYear().toString(); $scope.monthList = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; $scope.$watch('[cardExpiration.month,cardExpiration.year]', (value) => { modelController.$setViewValue($scope.cardExpiration); modelController.$render(); modelController.$pristine = false; if ($scope.cardExpiration && $scope.cardExpiration.year && $scope.cardExpiration.month && !isNaN(parseInt($scope.cardExpiration.month))) { modelController.$setTouched(); modelController.$dirty = true; modelController.$setValidity('expiryDate', true); if ($scope.cardExpiration.year == $scope.currentYear && parseInt($scope.cardExpiration.month) <= $scope.currentMonth) { modelController.$setValidity('expiryDate', false); return undefined; } return value; } }, true); } }; }]); On Friday, February 20, 2015 at 7:55:10 AM UTC+11, Tom wrote: > > Hi I'm trying to write a custom form control which has a directive which > renders two select elements. I'd like to then validate those select > elements based on values in both. > > I've required ngmodel and am calling set validity but try as I might I > can't get the event to bubble up or the values to appear in the out of the > box form.control name.$valid > > Just wondering if someone has an example of something similar as I'm sure > I'm missing something small. > > I'll post a plunkr shortly -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
