feat: add contact form using Reactive Forms Module (#141)

Author: tieppt

src/app/app.component.html

@@ -13,6 +13,10 @@ <h3>
 	<a [routerLink]="['/github', 'angular']">
     Github Repos
   </a>
+  |
+	<a [routerLink]="['/contact']">
+    Contact Us
+  </a>
 </nav>
 
 <main>

src/app/app.module.ts

@@ -3,7 +3,7 @@ import {RouterModule} from "@angular/router";
 import {rootRouterConfig} from "./app.routes";
 import {AppComponent} from "./app.component";
 import {GithubService} from "./github/shared/github.service";
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {BrowserModule} from "@angular/platform-browser";
 import {HttpModule} from "@angular/http";
 import {AboutComponent} from './about/about.component';
@@ -12,10 +12,11 @@ import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component
 import {RepoListComponent} from './github/repo-list/repo-list.component';
 import {RepoDetailComponent} from './github/repo-detail/repo-detail.component';
 import {LocationStrategy, HashLocationStrategy} from '@angular/common';
+import { ContactComponent } from './contact/contact.component';
 
 @NgModule({
-  declarations: [AppComponent, AboutComponent, RepoBrowserComponent, RepoListComponent, RepoDetailComponent, HomeComponent],
-  imports     : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)],
+  declarations: [AppComponent, AboutComponent, RepoBrowserComponent, RepoListComponent, RepoDetailComponent, HomeComponent, ContactComponent],
+  imports     : [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)],
   providers   : [GithubService, {provide: LocationStrategy, useClass: HashLocationStrategy}],
   bootstrap   : [AppComponent]
 })

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import {HomeComponent} from './home/home.component';
 import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component';
 import {RepoListComponent} from './github/repo-list/repo-list.component';
 import {RepoDetailComponent} from './github/repo-detail/repo-detail.component';
+import { ContactComponent } from './contact/contact.component';
 
 export const rootRouterConfig: Routes = [
   {path: '', redirectTo: 'home', pathMatch: 'full'},
@@ -18,6 +19,7 @@ export const rootRouterConfig: Routes = [
           {path: ':repo', component: RepoDetailComponent}
         ]
       }]
-  }
+  },
+  {path: 'contact', component: ContactComponent}
 ];
 

src/app/contact/contact-component.css

@@ -0,0 +1,14 @@
+.form-content {
+  width: 90%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.form-content .sd-form-control {
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+  padding: 10px;
+}
+.form-content textarea.sd-form-control {
+  max-width: 100%;
+}

src/app/contact/contact.component.html

@@ -0,0 +1,36 @@
+<h2>Contact Reactive Form</h2>
+
+<form (ngSubmit)="submitForm()" [formGroup]="contactForm" novalidate>
+  <div class="form-content">
+    <label>
+      Name:
+      <input type="text" formControlName="name" class="sd-form-control" placeholder="Enter your name.">
+    </label>
+    <label>
+      Email:
+      <input type="email" formControlName="email" class="sd-form-control" placeholder="Enter your email.">
+    </label>
+    <label>
+      Content:
+      <textarea formControlName="content" class="sd-form-control" placeholder="Content here."></textarea>
+    </label>
+    <div class="form-submit">
+      <button type="submit">Submit</button>
+    </div>
+  </div>
+</form>
+
+<div class="form-value">
+  Form value:
+  <pre>
+    {{contactForm.value | json}}
+  </pre>
+  <p>
+    Status: {{contactForm.status}}
+  </p>
+  <p>
+    Valid: {{contactForm.valid}}
+  </p>
+  <p>Submit then open console to see full form.</p>
+</div>
+

src/app/contact/contact.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import CustomValidators from '../forms/CustomValidators';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact-component.css']
+})
+export class ContactComponent implements OnInit {
+  contactForm: FormGroup;
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.contactForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, CustomValidators.validateEmail]],
+      content: ['', [Validators.required, Validators.minLength(10)]]
+    });
+  }
+  submitForm(): void {
+    console.log(this.contactForm);
+  }
+}

src/app/forms/CustomValidators.ts

@@ -0,0 +1,16 @@
+import {FormControl} from '@angular/forms';
+
+export default class CustomValidators {
+  /**
+   * sample from http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html
+   */
+  static validateEmail(c: FormControl) {
+    let EMAIL_REGEXP = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
+
+    return EMAIL_REGEXP.test(c.value) ? null : {
+      validateEmail: {
+        valid: false
+      }
+    };
+  }
+}