Как добавить проверочное письмо с проверкой по шаблону с помощью ngClass

Question

Я хочу отображать данные красным цветом, когда адрес электронной почты недействителен.

Нет у меня. данных, из них некоторые идентификаторы электронной почты не проверены. Я использовал только класс Dynami c.

//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}

Answer 1

Сначала подумайте об использовании вместо этого поля ввода.

Я бы рекомендовал использовать FormBuilder из Angular Forms .
Это поможет вам с упрощенным шаблоном и значительно упростит проверку.

Может выглядеть так:

// 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,
            ])
        ]
    });

FormGroup называется "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] добавляет к метке класс «error». Вы также можете использовать это для своего поля ввода.

Answer 2

Вы неправильно используете регулярное выражение. Взгляните на это do c.

Вы можете создать простую функцию для проверки вашей электронной почты и возврата логического значения.

Файл 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>