Question

我有一个电子邮件字段，我使用属性pattern进行RegEx检查。

<input matInput formControlName="email" name="email" pattern="^\w+([d\\+1\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #inputMail>

如果电子邮件太长，浏览器会表现得很奇怪，例如firstNamelastNameWhatEverAsEmail@gmail.com

换句话说，浏览器冻结并挂起......没有任何事情发生。在这种情况下，我甚至无法关闭浏览器 - chrome。

如果我删除属性pattern或formControlName，那么它可以直接使用，我可以尽可能地输入电子邮件。所以这意味着我不能同时使用它们。

以下是***.component.ts**中的formControl：

 .....
 public form: FormGroup;
 .....
 this.form = this.fb.group({
     account: this.fb.group(
         {
             email: ['', Validators.required],
             xxxxx: ['', Validators.required],
             yyyyy: ['', Validators.required],
             zzzzz: ['', Validators.requiredTrue]
         }
     )
 });

有什么想法吗？

Answer 1

如果您使用的是反应形式（如组件代码中所示），则不应将其与模板驱动的表单混合使用。

这基本上意味着你不应该在模板中混合验证（使用pattern属性），而是将所有验证添加到组件中。

Validators.pattern('yourpatternhere');

以下是我的一个例子：

this.fb.group({
    email: ['', [
                  Validators.required, 
                  Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+')
                ]
           ],
    xxxx: ''
});

注意：这是一个非常的基本示例，不用于说明有效的电子邮件模式。

为什么不能将pattern属性和formControl用于同一个电子邮件字段？

1 个答案: