[W8D3] (ArndtED) Adds reactive, template account forms

myApp/src/app/account/account.component.css

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

myApp/src/app/account/account.component.html

@@ -18,10 +18,75 @@
     </div>
   </form>
   <div >
-    <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+    <!-- <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert> -->
     <!-- <div class= "invalid-text" *ngIf="showMessage">
         {{invalidEntry}}
     </div> -->
   </div>
 </div>
 
+<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>
\ No newline at end of file

myApp/src/app/account/account.component.ts

 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
+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 {
-
-  userForm: FormGroup;
-  showMessage: true;
-
-  constructor(fb: FormBuilder) { 
-    this.userForm = fb.group({
-      firstName: ["", Validators.required],
-      lastName: ["", Validators.required],
-      email: ["", Validators.required],
+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,}')]]
     });
   }
-
-  onSubmit1() {}
-
-  ngOnInit(): void {
+  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

myApp/src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { BrowserModule } from '@angular/platform-browser';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,6 +27,7 @@ import { AccountComponent } from './account/account.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
     ReactiveFormsModule,
     NgbModule,
   ],