Email ID should accept special character also

Question

Please help me to validate the entered email so that the input box should accept all special characters. This is email ID: sokoł[email protected] We need to validate this email ID.

ts file:

 this.fromEmail = this.fb.control('', [
      Validators.required,
      Validators.email,
    ]);

I need regex to validation.

Answer 1

Angular comes with built in validators when creating a FormControl.

public email_id = new FormControl('', Validators.email);

This should accept your above example as a valid email. I would recommend reading up on FormControl and validation events.

https://angular.io/guide/form-validation

Answer 2

Here I have provided a sample code for email validation in angular for your reference

Html:
        <form [formGroup]="service.formModel" autocomplete="off" (submit)="onSubmit()">
          <div class="form-group required">
            <label>Username</label>
            <input class="form-control" formControlName="UserName">
            <label class="text-danger" *ngIf="service.formModel.get('UserName').touched && service.formModel.get('UserName').errors?.required">This field is mandatory.</label>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input class="form-control" formControlName="Email">
            <label class="text-danger" *ngIf="service.formModel.get('Email').touched && service.formModel.get('Email').errors?.email">Invalid email address.</label>
          </div>
          <div formGroupName="Passwords">
            <div class="form-group required">
              <label>Password</label>
              <input type="password" class="form-control" formControlName="Password">
              <label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.required">This field is mandatory.</label>
              <label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.minlength">Minimum 4 characters required.</label>
            </div>
            <div class="form-group required">
              <label>Confirm Password</label>
              <input type="password" class="form-control" formControlName="ConfirmPassword">
              <label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.required">This field is mandatory.</label>
              <label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.passwordMismatch">Confirm Password does not match.</label>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-8 offset-md-2">
              <button type="submit" class="btn btn-lg btn-block" [disabled]="!service.formModel.valid">Sign Up</button>
            </div>
          </div>
        </form>

TS:

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { UserService } from 'src/app/shared/user.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {

  constructor(public service: UserService,private toastr: ToastrService) { }

  ngOnInit(): void {
    this.service.formModel.reset();
  }
  
  onSubmit() 
  {
    this.service.register().subscribe
    (
      (res: any) => 
      {
          console.log(res);
          this.service.formModel.reset();
          this.toastr.success('New user created!', 'Registration successful.');
      },
      err => {
        if (err.status == 400)
          this.toastr.error('Username is already Exist', 'Registeration Failed.');
        else
          console.log(err);
      }
    );
  }
}