如何处理ngFor中输入类型的动态正则表达式值？答案

【问题标题】：how to handle dynamic regex value for input type inside ngFor?如何处理ngFor中输入类型的动态正则表达式值？
【发布时间】：2021-01-08 16:22:21
【问题描述】：

我有一个对象数组，每个对象都有必须动态生成的输入字段的详细信息，我已经根据从 API 接收的类型完成了动态输入字段生成，但我无法匹配正则表达式。

 <ng-container *ngFor="let list of inputList">
    <label>{{list.key}}</label>
    <input [type]="list.type" [value]="list.value" [required]="list.required" [pattern]="list.regex"  (input)="valueChange($event)"  />
    </ng-container>

API 响应输入列表

[{key: "Name", type: "text", value: "", required: true, mandatory: false, regex: [A-Z][a-z]$}
{key: "Number", type: "number", value: "", required: true, mandatory: false, regex: [0-9]{10}$}
{key: "description", type: "textarea", value: "", required: true, mandatory: false, regex: [a-z]{10,250}}
{key: "email", type: "text", value: "", required: true, mandatory: false, regex: /\S+@\S+\.\S+/}];

但是该模式不起作用，是否有任何替代方法只能接受来自键盘的这些输入，例如在移动用户不应该能够键入除数字之外的其他键的情况下。

【问题讨论】：

标签： javascript regex angular typescript

【解决方案1】：

如果您将正则表达式作为字符串传递并且不包括/，它应该可以工作，如下所示：

[{key: "Name", type: "text", value: "", required: true, mandatory: false, regex: "[A-Z][a-z]$"}
{key: "Number", type: "number", value: "", required: true, mandatory: false, regex: "[0-9]{10}$"}
{key: "description", type: "textarea", value: "", required: true, mandatory: false, regex: "[a-z]{10,250}"}
{key: "email", type: "text", value: "", required: true, mandatory: false, regex: "\S+@\S+\.\S+"}]

<form onsubmit="return false;">
  <input type="text" pattern="[A-Z][a-z]$">
  <input type="submit">
</form>

另一方面，您确定这些是您要验证这些字段的正则表达式吗？

[A-Z][a-z]$ - 一个大写和一个小写字母，正是这两个。也许您的意思是 [A-Z][a-z]+（一个大写字母，任意数量的小写字母）。

[0-9]{10}$ - 正好十位数。

[a-z]{10,250} - 10 到 250 个小写字母，没有空格或点。

\S+@\S+\.\S+ - 对于电子邮件验证，有很好的示例和深入讨论here。

【讨论】：