导出 Angular 反应形式的验证器答案

【问题标题】：Exporting a validator for Angular reactive form导出 Angular 反应形式的验证器
【发布时间】：2020-09-08 08:36:29
【问题描述】：

我正在尝试创建一个ValidatorFn，它将用于代表自定义反应式表单控件的多个组件中。我最初的想法是生成一个 TypeScript 类，在那里创建一个（或多个）公共静态函数，然后像这样使用它：myFGroup.setValidators(ReactiveValidators.myValidator)。

问题是，虽然我在 app.module 中导入了这个ReactiveValidators 类并将其添加到declarations: []，但我仍然得到最喜欢的错误：

错误 TS2307：找不到模块 'src/app/validators/reactive-validators'

谁能告诉我我做错了什么？另外，这种方法到底好不好？

【问题讨论】：

您是否在 ReactiveValidators 类中添加了 @Component ？您是否在模块的 declaration 中添加了 ReactiveValidators ？如果是这样，请将其删除。它不是 Angular 组件。
不，我没有添加@Component。感谢您指出了这一点。但是如何导出 ValidatorFn 或正确包装它的类？我不热衷于将它粘贴到几个文件中:)
使用myFGroup.setValidators(ReactiveValidators.myValidator) 将起作用，其中ReactiveValidators 在您应用的任何位置的自己的文件中。
这就是我的想法 - 并且做到了。我什至使用ng generate class 生成了一个ReactiveValidators 类，但我仍然得到上面的错误。
我在编辑答案时发现了它......正确的导入语句是import { maxInputLengthValidator } from '../../validators/reactive-validators'。注意相对路径。而且，出于某种原因，VS Code 自动导入使用绝对路径，即错误消息中的路径。我修复了路径，现在它可以工作了。感谢您的帮助！

标签： angular typescript angular-reactive-forms angular-custom-validators

【解决方案1】：

ValidatorFun 只是一个函数，它不需要在任何类中。您可以简单地使用导出的验证器函数创建一个 ts 文件。

export const myValidator: ValidatorFn = /* ... */;
export const myOtherValidator: ValidatorFn = /* ... */;
export function myJustAnotherValidator(/* ... */) { /* ... */ }

你可以像这样导入它们 import { myValidator, myOtherValidator } from '../mypath/reactive-validators'; 或者 import * as ReactiveValidators from '../mypath/reactive-validators';

无需导入模块

【讨论】：

我试过了。创建了一个reactive-validators.ts 文件，而不是将其设为一个类，而是像这样导出了一个函数：export const maxInputLengthValidator: ValidatorFn = function() {...}... 我仍然收到错误 cannot find module src/app/validators/reactive-validators 。跨度>

【解决方案2】：

根据@dzenesiz 他发现的问题，问题在于导入语法。

正确的导入语句是import。

{ maxInputLengthValidator } from '../../validators/reactive-validators'

注意相对路径。而且，出于某种原因，VS Code 自动导入使用绝对路径，即错误消息中的路径。我修复了路径，现在它可以工作了

【讨论】：