How add validation Email with pattern validation using ngClass

Question

I want to display data in red colour when email is invalid.

I have n no. of data, out of them some email ids are not validated. I have used only dynamic class.

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

why are you doing this this.email_regx = true;. You should do something like this. this.data.email_id.test(this. email_regx) — Piyush Jain
– Piyush Jain, Commented Jun 16, 2020 at 10:29
Please, have a look at these sites: TLD list; valid/invalid addresses; regex for RFC822 email address — Toto
– Toto, Commented Jun 16, 2020 at 15:23

Ben · Accepted Answer · 2020-06-16 10:36:03Z

1

You are not using regex the right way. Have a look to this doc.

You can make a simple function to test your email and return a boolean.

Component ts file :

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

html file :

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

answered Jun 16, 2020 at 10:36

Ben

4,1208 gold badges51 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

f.overflow · Accepted Answer · 2020-06-16 10:38:11Z

At first, please think about using an input field instead.

I would recommend to use FormBuilder from Angular Forms.
It will help you with a lean template and make validation a lot easier.

Could look like:

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

The FormGroup called "contactForm" here holds one input field called "email". The validation is for your email.

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

The important part here is the formControlName and the [formGroup] to connect to your ts´s validation.
The part [class.error] adds the class "error" to the label. You also could use that for your input field.

Collectives™ on Stack Overflow

How add validation Email with pattern validation using ngClass

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related