Check out example codes for "email validation pattern angular". It will help you in understanding the concepts better.

Code Example 1

pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$"

Code Example 2

validateEmail(email) {
 const regularExpression = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 return regularExpression.test(String(email).toLowerCase());
}

Code Example 3

<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">

Learn ReactJs, React Native from akashmittal.com