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保持为false，直到表达式有效。感谢您的帮助！

Answer 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)
}

更改视觉样式

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

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

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

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

表格有效性

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

Angular：正则表达式逻辑

1 个答案: