account page created

src/app/account/account.component.css

+.input{
+    width: 15em;
+    height: 2em;
+    margin-bottom: 1em;
+}
+  .invalid-text{
+      color:red;
+  }
+
+  .invalid-text{
+    color:red;
+}
+.ng-invalid.ng-touched:not(form) {
+  border: 2px solid red;
+}
\ No newline at end of file

src/app/account/account.component.html

-<p>account works!</p>
+<div>
+    <div style="display:inline-block">
+    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
+          <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>

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: 'account',
+  selector: 'app-account',
   templateUrl: './account.component.html',
   styleUrls: ['./account.component.css']
 })
 export class AccountComponent implements OnInit {
-
-  constructor() { }
-
+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
+    }
+  }
+}
\ No newline at end of file

src/app/app.module.ts

@@ -11,6 +11,8 @@ 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 {FormsModule} from '@angular/forms';
+import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -26,7 +28,9 @@ import { AccountComponent } from './account/account.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgbModule
+    NgbModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/england/england.component.css

@@ -2,4 +2,4 @@
     height: 350px;
     width: 350px;
     padding-left: 5px;
-}
+}
\ No newline at end of file