regex - 正则表达式逻辑

问题描述

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

@Component({
  selector: 'input-text',
  templateUrl: './input-text.component.html'
  ]
})
export class InputTextComponent {

  @Input() pattern?: string;

}

我希望用户可以通过这种方式插入一个正则表达式来验证输入字段：

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

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

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

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

1 - 创建一个检查正则表达式有效性并改变视觉风格的方法。

2 - 确保如果将输入（带有pattern字段）插入到表单中，则该属性form.valid保持为假，直到表达式有效。谢谢你的帮助！

标签： regexangulartypescriptcomponents

检查正则表达式的有效性

您可以简单地捕获 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>

表格有效性

你做得很好[attr.pattern]，表单应该自动考虑输入的模式。您应该先用硬写的正则表达式尝试您的表单，然后使用输入的。
按照这个官方指南创建 Angular 2+ 表单。

regex - 正则表达式逻辑

问题描述

解决方案

推荐阅读