New validator in shared, new form validation and updated dependencies.

Author: jeroenouw

README.md

@@ -6,7 +6,7 @@
 ![logo](https://jerouw.nl/wp-content/uploads/2017/05/ngfbmd.png "Logo")  
 
 # Angular 4 | Material Design | Firebase - Starter kit
-A full stack starter app containing [Angular 4](https://angular.io) (v5.0.0-beta.1/v4.3.2), [Material](https://material.io/) (v2.0.0-beta.8) and [Firebase](https://firebase.google.com/) (v4.2.0).
+A full stack starter app containing [Angular 4](https://angular.io) (v5.0.0-beta.2/v4.3.3), [Material](https://material.io/) (v2.0.0-beta.8) and [Firebase](https://firebase.google.com/) (v4.2.0).
 
 
 ### Project is still in progress

package.json

@@ -28,18 +28,18 @@
     "i18n": "ng-xi18n"
   },
   "dependencies": {
-    "@angular/animations": "^4.3.2",
+    "@angular/animations": "^4.3.3",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.2",
-    "@angular/compiler": "^4.3.2",
-    "@angular/core": "^4.3.2",
-    "@angular/forms": "^4.3.2",
-    "@angular/http": "^4.3.2",
+    "@angular/common": "^4.3.3",
+    "@angular/compiler": "^4.3.3",
+    "@angular/core": "^4.3.3",
+    "@angular/forms": "^4.3.3",
+    "@angular/http": "^4.3.3",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.2",
-    "@angular/platform-browser-dynamic": "^4.3.2",
-    "@angular/platform-server": "^4.3.2",
-    "@angular/router": "^4.3.2",
+    "@angular/platform-browser": "^4.3.3",
+    "@angular/platform-browser-dynamic": "^4.3.3",
+    "@angular/platform-server": "^4.3.3",
+    "@angular/router": "^4.3.3",
     "core-js": "^2.4.1",
     "firebase": "^4.2.0",
     "hammerjs": "^2.0.8",
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@angular/cli": "^1.2.6",
-    "@angular/compiler-cli": "^4.3.2",
+    "@angular/compiler-cli": "^4.3.3",
     "@types/jasmine": "^2.5.53",
     "@types/node": "^8.0.17",
     "codelyzer": "^3.1.2",

src/app/components/email-me/email-me.component.html

@@ -1,10 +1,13 @@
-<form class="form" (ngSubmit)="onSubmit(f)" #f="ngForm"> 
+<form class="form" [formGroup]="form" (ngSubmit)="onSubmit(f)" #f="ngForm"> 
   <md-card>
     <h3>Keep in touch!</h3>
     <md-input-container class="full-width">
-      <input mdInput placeholder="Your Email" type="email" id="email" name="email" ngModel required>
+      <input mdInput formControlName="email" placeholder="Your Email" type="email" ngModel required>
     </md-input-container>
+    <div *ngIf="!form.controls.email.valid  && form.controls.email.dirty">
+      <p>Please enter a valid email.</p>
+    </div>
     <br />
-    <button md-raised-button class="primary" type="submit" [disabled]="f.invalid">Submit</button>
+    <button md-raised-button class="primary" type="submit" [disabled]="form.invalid">Submit</button>
   </md-card>
 </form>

src/app/components/email-me/email-me.component.ts

@@ -1,19 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-import { NgForm } from '@angular/forms';
+import { NgForm, FormBuilder, Validators, FormGroup  } from '@angular/forms';
 
-import { AlertService, UserService } from '../shared';
+import { UserService, EmailValidator } from '../shared';
 
 @Component({
   selector: 'app-email-me',
   templateUrl: './email-me.component.html',
   styleUrls: ['./email-me.component.scss']
 })
 export class EmailMeComponent implements OnInit {
-  constructor(
-    private alertService: AlertService,
-    private userService: UserService) {
+  public form: FormGroup;
 
-    }
+  constructor(private userService: UserService,
+              public formBuilder: FormBuilder) 
+  {
+    this.form = formBuilder.group({
+      email: ['', Validators.compose([Validators.required, EmailValidator.isValid])]
+    });
+  }
 
   ngOnInit() {
   }

src/app/components/shared/index.ts

@@ -2,3 +2,4 @@ export * from './models'
 export * from './layout';
 export * from './services';
 export * from './interfaces';
+export * from './validators';

src/app/components/shared/layout/header/header.component.ts

@@ -44,9 +44,9 @@ export class HeaderComponent {
 
   public menuItems: Array<Object> = [
     {
-      icon: 'photo_library',
-      title: 'Portfolio',
-      link: 'https://jerouw.nl'
+      icon: 'description',
+      title: 'Published packages',
+      link: 'https://www.npmjs.com/~jeroenouw'
     },
     {
       icon: 'link',

src/app/components/shared/validators/email.ts

@@ -0,0 +1,17 @@
+import { FormControl } from '@angular/forms';
+
+export class EmailValidator {
+
+  static isValid(control: FormControl){
+    const re = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(control.value);
+
+    if (re){
+      return null;
+    }
+
+    return {
+      "invalidEmail": true
+    };
+
+  }
+}

src/app/components/shared/validators/index.ts

@@ -0,0 +1 @@
+export * from './email';