如何使用 ngClass 添加带有模式验证的验证电子邮件答案

【问题标题】：How add validation Email with pattern validation using ngClass如何使用 ngClass 添加带有模式验证的验证电子邮件
【发布时间】：2020-06-16 10:20:33
【问题描述】：

我想在电子邮件无效时以红色显示数据。

我没有。的数据，其中一些电子邮件 ID 未经过验证。我只使用了动态类。

//ts file

email_regx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if (this.data.email_id) {
   this.email_regx = true;
} else {
  this.email_regx = false;
}

//html file
<span [ngClass]="{'redClass': email_regx}">{{ data?.email_id }}</span>

//css
  .redClass{ color: red}

【问题讨论】：

<input type="email" /> 会所以容易得多...
不，我只想要 ngclass
你为什么要这么做this.email_regx = true;。你应该做这样的事情。 this.data.email_id.test(this. email_regx)
请看看这些网站：TLD list; valid/invalid addresses; regex for RFC822 email address

标签： javascript regex angular typescript

【解决方案1】：

首先，请考虑改用输入字段。

我建议使用来自Angular Forms 的FormBuilder。
它将帮助您使用精益模板并使验证变得更加容易。

可能看起来像：

// TS
contactForm: FormGroup;

constructor() {
    this.contactForm = this.formBuilder.group({
        email: [
            '',
            Validators.compose([
                Validators.pattern('^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'),
                Validators.required,
            ])
        ]
    });

这里称为“contactForm”的表单组包含一个称为“电子邮件”的输入字段。验证是针对您的电子邮件的。

// Template
<form id="contactForm" [formGroup]="contactForm">
    <ion-item lines="none" class="list-item">
        <div>
            <ion-label position="stacked"
                       [class.error]="contactForm.controls.email.value != undefined && !contactForm.controls.email.valid">
                E-Mail *
            </ion-label>
            <ion-input id="email" type="email" formControlName="email"></ion-input>
        </div>
    </ion-item>
</form>

这里的重要部分是 formControlName 和 [formGroup] 以连接到您的 ts 验证。
[class.error] 部分将类“错误”添加到标签中。您也可以将其用于输入字段。

【讨论】：

【解决方案2】：

您没有以正确的方式使用正则表达式。看看to this doc。

您可以创建一个简单的函数来测试您的电子邮件并返回一个布尔值。

组件 ts 文件：

public isValidEmail(email: string): boolean {
    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
}

html 文件：

<span [ngClass]="{'redClass': isValidEmail(data?.email_id)}">{{ data?.email_id }}</span>

【讨论】：