Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Angular Template Angular Template
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • IzeniIzeni
  • Angular TemplateAngular Template
  • Wiki
  • cookbook forms

cookbook forms · Changes

Page history
jlewis created page: cookbook forms authored May 03, 2017 by Joe Lewis's avatar Joe Lewis
Hide whitespace changes
Inline Side-by-side
cookbook-forms.md
View page @ c655b4a3
...@@ -235,4 +235,53 @@ export class CareerComponent implements OnInit { ...@@ -235,4 +235,53 @@ export class CareerComponent implements OnInit {
} }
} }
```
# Custom Form validators. The email Validator matches the html input type[email] regex.
```javascript
// @inspired by: https://coryrylan.com/blog/angular-2-form-builder-and-validation-management
// form validation examples: http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html
import { Injectable } from '@angular/core';
Injectable();
export class ValidationService {
constructor () {}
public getValidatorErrorMessage (validatorName: string) {
let config = {
required: 'Required',
invalidEmailAddress: 'Invalid email address',
invalidPassword: 'Invalid password. Password must be at least 6 characters long, and contain a number.',
};
return config[validatorName];
}
public emailValidator (control: any) {
// RFC 2822 compliant regex for email validation
// tslint:disable-next-line:max-line-length
if (control.value.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
return null;
} else {
return { 'invalidEmailAddress': true };
}
}
public passwordValidator (control: any) {
// {6,100} - Assert password is between 6 and 100 characters
// (?=.*[0-9]) - Assert a string has at least one number
if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) {
return null;
} else {
return { 'invalidPassword': true };
}
}
public phoneInternationalValidator (control: any) {
// {6,100} - Assert password is between 6 and 100 characters
// (?=.*[0-9]) - Assert a string has at least one number
if (control.value.match(/(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]‌)\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)([2-9]1[02-9]‌|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})/)) {
return null;
} else {
return { 'invalidInternationalPhoneNumber': true };
}
}
}
``` ```
\ No newline at end of file
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack