在 Angular 8 Reactive Formbuilder 中存储和使用 Regex Const Validator答案

【问题标题】：Store and Use Regex Const Validator in Angular 8 Reactive Formbuilder在 Angular 8 Reactive Formbuilder 中存储和使用 Regex Const Validator
【发布时间】：2020-04-15 06:55:35
【问题描述】：

如何在 Angular 中存储 Regex Validator 模式以供重用和 Dry 主体？在下面为 ZipCode 提供一个带有正则表达式验证器模式的反应式表单构建器。

需要申请多个地址形式，好奇怎么保存/^\d{1,5}$/

所以我们可以写Validators.pattern(zipcode)，或者Angular中使用的任何语法？公司有更复杂的电话号码、客户号码等长模式。

'ZipCode': [null, [Validators.maxLength(16), Validators.pattern(/^\d{1,5}$/)]],

寻找一种方法来存储和利用可能的常量。

这适用于 Angular 2：

ng-pattern to use regex from angular constants

【问题讨论】：

我认为您的模式不起作用尝试'^\d{1,5}$' 而不是/^\d{1,5}$/
是的，它对我有用，只是对将正则表达式模式保存在变量中并用于以后使用更加好奇，谢谢

标签： angular typescript angular-reactive-forms angular8

【解决方案1】：

您可以将验证存储在一些.ts 文件中，假设validations.ts。

然后在需要时使用这些验证。你也可以有参数验证器。

validation.ts

export const ZipValidation = Validators.pattern(/^\d{1,5}$/);
export const EmailValidation = Validators.pattern(/*some regex*/);
export const UsernameValidation = Validators.pattern(/*some regex*/);
export const ValidWithParam = (param: number) => {
  return Validators.pattern('/\d' + param + '/g');
}

在组件中

import { ZipValidation, EmailValidation, UsernameValidation } from './validation';
'ZipCode': [null, [Validators.maxLength(16), ZipValidation]],

【讨论】：

创建像 const temp = [Validators.min(-90), Validators.max(90)] 这样的数组，并在验证器中使用扩展运算符使用该数组。例如[...temp]
这里是问题stackoverflow.com/questions/59465475/…

【解决方案2】：

最好的办法是拥有一个主根级共享服务并将所有模式存储在其中。

当您需要它时 - 您可以通过参考共享服务来使用它。如果您可以实现端点（如果可能），则通过该特定服务，以便可以通过您的应用程序后端配置验证器。

否则，您可以在服务本身中硬编码验证器模式。

【讨论】：

这很简单。我在上面看到了一些正确的答案。所以我分享了我的观点。一件事很重要。上面提到的所有答案都可以。但是，如果您在端点中配置它，您将不必再次经历构建过程。例如，如果飞行公司想要添加另一个验证器怎么办。这些将通过使用可配置的端点来满足。否则你将不得不去前端，添加验证器构建和部署。
是的，我们已经在使用共享服务，这个可以放在答案下面的 cmets 中，谢谢