Menu
I am new in learning Angular2, and I want to make a validation form that verifies emails after a RegEx pattern.
My code looks something like this but I don't have any idea if I am doing it right, or what I did wrong, can somebody please help me a bit?
Thank you!
I fixed it. Thank you a lot everybody.
<div class="alert-email"> <label for="contactemail">EMAIL: </label> <input type="email" id="contactemail" name="contactemail" required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" [(ngModel)]="model.contactemail" #contactemail="ngModel" placeholder="Your email" /><br><br> <div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br> <div [hidden]="!contactname.errors.required"> Email is required </div> <div [hidden]="!contactname.errors"> Please input a valid email. </div> </div> </div>
565
To add validation to a template-driven form, you add the same validation attributes as you would with native HTML form validation. Angular uses directives to match these attributes with validator functions in the framework.
How to add a Validator to Reactive Forms. We configure the validators as the second and third argument to the FormControl , FormGroup or FormArray in the component class. The second argument is a collection of sync validators and the third argument is a collection of an async validators.
Definition and Usage. The <input type="email"> defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.
Try Something like that
<div class="alert-email"> <label>Email</label> <input id="contactemail" type="text" #contactemail="ngModel" [(ngModel)]="model.contactemail" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"> <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched"> <div *ngIf="contactemail.errors && contactemail.errors.required"> Email is required </div> <div *ngIf="contactemail.errors && contactemail.errors.pattern"> Email is invalid </div> </div> </div> Angular 4 has a built-in "email" validation tag that can be added within the input. E.g.:
<input type="email" id="contactemail" email> This will be valid for a series of numbers and letters then an @ then another series of letters. It will not account for the dot after the @ -- for that you can use the "pattern" tag within the input and your standard regex.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
