angular - 如何防止某些击键出现在 Angular 反应式表单输入字段中

Question

我正在为我的反应式类驱动表单中的某些输入字段添加验证。这是我的一些输入字段的示例：

.html

<input matInput formControlName="{{ field?.controlName }}" maxLength="{{ field?.maxLength }}" placeholder="{{ field?.label }}">
<span matSuffix class="input-suffix">Required</span>

在浏览器中

我想知道如何添加防止输入任何特殊字符的功能。

注意：我已经在使用自定义验证器函数，如果任何字符与正则表达式匹配，它将引发一个小错误消息。

但是，我希望它可以防止受限制的字符甚至出现。因此，如果用户键入 '%' 或 '&' 什么都不会发生。另外，我想允许一些字符，如撇号或连字符。

标签： angularangular-materialangular-reactive-forms

Answer 1

由于您使用的是角度材料，因此一种干净的方法是执行自定义表单字段。这将使它能够很好地流动并像其他表单字段一样使用。

如果需要，还有其他选项，例如对此类似问题的回答。