regex - 正则表达式逻辑

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+ 表单。