TypeScript 中的自定义 Angular 验证器

Question

我在 TypeScript 中创建了一个自定义 angular 表单验证器。在浏览器上一切正常，但打字稿在这一行抱怨 "Property 'compareTo' does not exist on type 'IModelValidators'"： ngModel.$validators.compareTo = modelValue => (modelValue === scope.otherModelValue); 这是有道理的，因为我基本上是在创建一个名为 "comparedTo" 的新验证器，它不存在并将其附加到模型。这在 javascript 中完全有效，但由于 Typescript 是强类型的，所以不太喜欢它。有没有人知道如何以打字稿安全的方式将我的 "compareTo" 验证添加到 ngModel.$validators？谢谢！

'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());

}

Answer 1

如果您只是想跳过打字稿错误，只需创建一个自定义明确类型的文件并添加类似这样的内容。

interface IModelValidators {
       comparedTo: any;
    }

如果您想获得正确的智能感知，请在您的自定义 d.ts 文件中使用类似的内容。

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

Answer 2

另一种解决方案是

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

TypeScript 中的自定义 Angular 验证器

Custom Angular validator in TypeScript

angularjs

typescript

angular-directive