正则表达式逻辑

Question

我正在使用 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 保持为假，直到表达式有效。 感谢您的帮助！

Answer 1

1. 检查正则表达式的有效性

您可以简单地捕获 RegExp 构造函数在实例化时抛出的异常。

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

1. 改变视觉风格

您可以简单地使用 ngClass 属性来更改您的输入样式。 如果输入catch语句，设置一个样式变量来改变类像这样

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

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

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

1. 表格有效性

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