From 879ad153ebdb82cd59d06cdda84315190f9d15bf Mon Sep 17 00:00:00 2001 From: Tiep Phan Date: Mon, 7 Nov 2016 11:28:49 +0700 Subject: [PATCH] add contact form using Reactive Forms Module --- src/app/app.component.html | 4 +++ src/app/app.module.ts | 7 ++--- src/app/app.routes.ts | 4 ++- src/app/contact/contact-component.css | 14 ++++++++++ src/app/contact/contact.component.html | 36 ++++++++++++++++++++++++++ src/app/contact/contact.component.ts | 24 +++++++++++++++++ src/app/forms/CustomValidators.ts | 16 ++++++++++++ 7 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 src/app/contact/contact-component.css create mode 100644 src/app/contact/contact.component.html create mode 100644 src/app/contact/contact.component.ts create mode 100644 src/app/forms/CustomValidators.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index a33130d0..8500dfa6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -13,6 +13,10 @@

Github Repos + | + + Contact Us +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8da9d3e1..f269c39a 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 6bfd52e7..e6accc25 100644 --- a/src/app/app.routes.ts +++ b/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} ]; diff --git a/src/app/contact/contact-component.css b/src/app/contact/contact-component.css new file mode 100644 index 00000000..4e5e8375 --- /dev/null +++ b/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%; +} diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html new file mode 100644 index 00000000..e5181057 --- /dev/null +++ b/src/app/contact/contact.component.html @@ -0,0 +1,36 @@ +

Contact Reactive Form

+ +
+
+ + + +
+ +
+
+
+ +
+ Form value: + 
+    {{contactForm.value | json}}
+
+

+ Status: {{contactForm.status}} +

+

+ Valid: {{contactForm.valid}} +

+

Submit then open console to see full form.

+
+ diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts new file mode 100644 index 00000000..14c38527 --- /dev/null +++ b/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); + } +} diff --git a/src/app/forms/CustomValidators.ts b/src/app/forms/CustomValidators.ts new file mode 100644 index 00000000..1e99f076 --- /dev/null +++ b/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 + } + }; + } +}