added contact form and account form to application, along with form validation

nisum_angular_handson/nisum-angular-handson/src/app/account/account.component.css

+.invalid-text{
+    color:red;
+}
+.ng-invalid.ng-touched:not(form) {
+  border: 2px solid red;
+}
\ No newline at end of file

nisum_angular_handson/nisum-angular-handson/src/app/account/account.component.html

-<p>account works!</p>
+<div>
+    <div style="display:inline-block">
+        <form [formGroup]="userForm" (ngSubmit)="onSubmit1()">
+            <div>
+                <p>reactive</p>
+                <div>
+                    <input type="text" formControlName="firstName" class="form-control input" placeholder="First name">
+                </div>
+                <div>
+                    <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
+                </div>
+            </div>
+            <input type="email" formControlName="email" class="form-control  input" placeholder="E-mail">
+            <div>
+                <button type="submit">Sign in</button>
+            </div>
+        </form>
+        <div>
+            <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+            <!-- <div class="invalid-text" *ngIf="showMessage">
+                {{invalidEntry}}
+            </div> -->
+        </div>
+    </div>
+    <!-- template driven form -->
+    <div style="display:inline-block; margin-left: 10em;">
+        <form #newUserForm="ngForm" (ngSubmit)="onSubmit2(newUserForm)">
+            <div>
+                <p>template-driven</p>
+                <input type="text" class="input" placeholder="User name" required [(ngModel)]="userName" name="userName"
+                    pattern="[a-zA-Z ]*" #pickedName="ngModel">
+                <div *ngIf="!pickedName.valid && pickedName.touched">
+                    User name is required!
+                </div>
+            </div>
+            <div>
+                <input type="email" class="input" placeholder="Email" required [(ngModel)]="email" name="email"
+                    #userEmail="ngModel" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}">
+                <div *ngIf="!userEmail.valid && userEmail.touched">
+                    Email is not valid!
+                </div>
+            </div>
+            <div>
+                <input type="password" class="input" placeholder="Password" required [(ngModel)]="password"
+                    name="password" #userPassword="ngModel">
+                <div *ngIf="!userPassword.valid && userPassword.touched">
+                    Password is required!
+                </div>
+            </div>
+            <button type="submit" [disabled]="!newUserForm.form.valid">
+                Register
+            </button>
+            <button type="button" (click)="newUserForm.reset()">
+                Reset
+            </button>
+        </form>
+        <!-- <pre>{{ newUserForm.form.value }}</pre> Value of whole form -->
+        <!-- <pre>User name: {{ pickedName.value }}</pre> Value of userName field -->
+        <pre>Valid form? {{ newUserForm.form.valid }}</pre>
+    </div>
+</div>
\ No newline at end of file

nisum_angular_handson/nisum-angular-handson/src/app/account/account.component.ts

 import { Component, OnInit } from '@angular/core';
+import { FormBuilder,Validators } from '@angular/forms';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-account',
   templateUrl: './account.component.html',
   styleUrls: ['./account.component.css']
 })
-export class AccountComponent implements OnInit {
 
-  constructor() { }
+export class AccountComponent implements OnInit {
+public userForm;
+public showMessage: boolean = false;
+public invalidEntry = 'Invalid entry';
 
+//template driven form
+userName = '';
+  email: string;
+  nickName: string;
+  password: string;
+  constructor(private formBuilder: FormBuilder) { }
   ngOnInit(): void {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
+    });
+  }
+  onSubmit(){
+    if(this.userForm.valid){
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+  onSubmit1(){
+    if(!this.userForm.valid){
+      this.showMessage = true;
+    }
+  }
+  //template driven
+  onSubmit2(form: NgForm) {
+    if (form.valid) {
+      console.log(form.value);
+      // ...our form is valid, we can submit the data
+    }
   }
-
 }

nisum_angular_handson/nisum-angular-handson/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { FranceComponent } from './france/france.component';
 import { GreeceComponent } from './greece/greece.component';
 import { SpainComponent } from './spain/spain.component';
 import { AccountComponent } from './account/account.component';
+import { ContactComponent } from './contact/contact.component';
 
 
 const routes: Routes = [
@@ -12,7 +13,9 @@ const routes: Routes = [
   { path: 'france', component: FranceComponent },
   { path: 'account', component: AccountComponent },
   { path: 'greece', component: GreeceComponent },
-  { path: 'spain', component: SpainComponent }];
+  { path: 'spain', component: SpainComponent },
+  { path: 'contact', component: ContactComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

nisum_angular_handson/nisum-angular-handson/src/app/app.module.ts

@@ -3,6 +3,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
+import { NgForm } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
@@ -11,6 +14,7 @@ import { FranceComponent } from './france/france.component';
 import { SpainComponent } from './spain/spain.component';
 import { GreeceComponent } from './greece/greece.component';
 import { AccountComponent } from './account/account.component';
+import { ContactComponent } from './contact/contact.component';
 
 @NgModule({
   declarations: [
@@ -21,12 +25,15 @@ import { AccountComponent } from './account/account.component';
     FranceComponent,
     SpainComponent,
     GreeceComponent,
-    AccountComponent
+    AccountComponent,
+    ContactComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgbModule
+    NgbModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

nisum_angular_handson/nisum-angular-handson/src/app/contact/contact.component.html

+<div style="display:inline-block">
+    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+        <div>
+            <p>Contact Us!</p>
+            <div>
+                <input type="text" formControlName="firstName" required class="form-control input"
+                    placeholder="First name">
+                <!-- <div *ngIf="errors.required">First Name Required</div> -->
+            </div>
+            <div>
+                <input type="text" formControlName="lastName" required class="form-control input "
+                    placeholder="Last name">
+            </div>
+        </div>
+        <input type="email" formControlName="email" required class="form-control  input" placeholder="E-mail">
+        <textarea type="text" formControlName="message" class="form-control input"
+            placeholder="Type Message Here..."></textarea>
+        <div>
+            <button type="submit">Send</button>
+        </div>
+    </form>
+    <div>
+        <ngb-alert *ngIf="formValid == false" type="danger">{{ msg }}</ngb-alert>
+        <ngb-alert *ngIf="formValid == true" type="success">{{ msg }}</ngb-alert>
+        <div class="invalid-text" *ngIf="formValid">{{ msg }}</div>
+    </div>
+</div>
\ No newline at end of file

nisum_angular_handson/nisum-angular-handson/src/app/contact/contact.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

nisum_angular_handson/nisum-angular-handson/src/app/contact/contact.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+// import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.css']
+})
+export class ContactComponent implements OnInit {
+
+  public contactForm;
+  public formValid: boolean;
+  public formInvalid: boolean;
+  public msg: string = "";
+
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.contactForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]],
+      message: ['']
+    });
+  }
+
+  // onSubmit() {
+  //   if(this.contactForm.valid) {
+  //     alert('Contact form sent!');
+  //   } else {
+  //     alert('Form is not valid');
+  //   }
+  // }
+
+  onSubmit() {
+    this.formValid = this.contactForm.valid;
+    this.formInvalid = this.contactForm.invalid;
+    if(this.formInvalid) {
+      this.msg = "Contact form invalid";
+    } else {
+      this.msg = "Contact form Sent";
+    }
+    console.log("valid: " + this.formValid);
+    console.log("invalid: " + this.formInvalid);
+    console.log(this.contactForm);
+  }
+
+}

nisum_angular_handson/nisum-angular-handson/src/app/footer/footer.component.html

@@ -2,6 +2,6 @@
     <ul>
         <li>About Us</li>
         <li>Careers</li>
-        <li>Contact Us</li>
+        <a [routerLink]="['/contact']"><li>Contact Us</li></a>
     </ul>
 </div>

nisum_angular_handson/nisum-angular-handson/src/app/header/header.component.html

@@ -6,6 +6,6 @@
         <button [routerLink]="['/greece']">Greece</button>
     </div>
     <span class="account">
-        <i class="fa fa-user"></i>
+        <i class="fa fa-user" [routerLink]="['/account']"></i>
     </span>
 </div>
\ No newline at end of file