Custom Angular validator in TypeScript

Question

I've created a custom angular form validator in TypeScript. Everything works fine on the browser but typescript is complaining that "Property 'compareTo' does not exist on type 'IModelValidators'" at this line: ngModel.$validators.compareTo = modelValue => (modelValue === scope.otherModelValue); Which makes sense, because I am basically creating a new validator called "comparedTo" that doesn't exist and just attaching it to the model. This is totally valid in javascript but since Typescript is strongly typed it didn't like it that much. Does anyone have any idea of how to add my "compareTo" validation to the ngModel.$validators in a typescript safe way? Thanks!

'use strict';

module App.Directives {

    export interface ILoZScope extends angular.IScope {
        otherModelValue: string;
    }

    export class CompareToDirective implements angular.IDirective {

        // Directive parameters.
        public restrict = 'A';
        public require = 'ngModel';
        public scope = { otherModelValue: '=compareTo' }

        // Constructor 
        public static $inject = ['$window'];
        constructor($window) {}

        // Link function
        public link(scope: ILoZScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes, ngModel: angular.INgModelController) {

            ngModel.$validators.compareTo = modelValue => (modelValue === scope.otherModelValue);

            scope.$watch('otherModelValue', () => { ngModel.$validate(); });
        }

        // Creates an instance of the compareToDirective class.
        public static factory(): angular.IDirectiveFactory {
            const directive = ($window: angular.IWindowService) => new CompareToDirective($window);
            directive.$inject = ['$window'];
            return directive;
        }

    }

    angular
        .module('app')
        .directive('compareTo', CompareToDirective.factory());

}

Krishna Veeramachaneni · Accepted Answer · 2015-08-30 05:39:13Z

1

If you just want to skip the typescript error, just create a custom definitely typed file and add something like this.

interface IModelValidators {
       comparedTo: any;
    }

If you want to get proper intellisense, use something like this in your custom d.ts file.

interface IModelValidators {
           comparedTo: (modelValue: any, viewValue: any) => boolean;
        }

edited Aug 30, 2015 at 5:39

answered Aug 30, 2015 at 5:29

Krishna Veeramachaneni

2,1513 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

squadwuschel · Accepted Answer · 2016-10-17 18:01:31Z

1

an alternate solution would be

ngModel.$validators["compareTo"] =  (modelValue, viewValue) : boolean => {
     if(modelValue....) {
         return true
     }
     return false;
}

answered Oct 17, 2016 at 18:01

squadwuschel

3,4483 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

Custom Angular validator in TypeScript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related