Regex 正则表达式逻辑

我正在使用Angular 6开发一个web应用程序。我有一个问题： 我正在创建一个自定义输入组件（用于文本输入），例如：

我希望用户可以插入正则表达式以验证输入字段，方法如下：

<input-text pattern="^[a-z0-9_-]{8,15}$"></input-text>

我的组件的模板定义如下：

<input type="text" [attr.pattern]="pattern"/>

不幸的是，我对正则表达式一无所知。 我想做两件事：

1-创建一个检查正则表达式有效性并更改视觉样式的方法

2-确保如果将输入（带有

模式

字段）插入表单，则属性

form.valid

在表达式有效之前保持为false。 谢谢你的帮助

检查正则表达式的有效性

您只需在实例化RegExp构造函数时捕获它引发的异常

try {
  const regex = new RegExp(pattern);
} catch (error) {
  // If it goes here, then the regex model is not correct
  console.error(error.message)
}

更改视觉样式

您可以简单地使用ngClass属性来更改输入样式。 如果您输入

catch

语句，请设置一个样式变量，这样更改类

private hasBadInput: boolean;
// [...]
catch (error) {
  hasBadInput= true;
}

然后在这种情况下应用特定的类：

<input-text [ngClass]="{'yourErrorClass': hasBadInput}"><input-text>

形式有效性

你很好地使用了<>代码[Atf.Type ] ，表单应该自动考虑输入的模式。您应该先使用硬写的正则表达式尝试表单，然后使用输入正则表达式。

---

按照此操作创建2+角形表单。

谢谢！我有一个问题：在第一个代码（try-catch）中，没有发生任何事情。如何将字符串与正则表达式进行比较？如果您的正则表达式中没有任何错误，则不会发生任何特殊情况。尝试类似“/（”的操作，您应该会出现异常并转到catch。有关RegExp对象的更多信息，请参阅文档：

<input-text [ngClass]="{'yourErrorClass': hasBadInput}"><input-text>