Commit

Author: fjavaler

src/app/app.component.css

@@ -1,5 +1,4 @@
-
->>> body {
+body {
     margin: 0;
 }
 
@@ -10,7 +9,6 @@ main {
 mat-toolbar {
     position: fixed;
     z-index: 1000;
-
 }
 
 .main-content {

src/app/login/login.component.html

@@ -1,13 +1,15 @@
 <mat-card class="login-page">
+
   <mat-card-title>Login</mat-card-title>
+
   <mat-card-content>
 
     <form class="login-form data-form" #loginForm="ngForm" (ngSubmit)="login(loginForm, $event)">
 
       <mat-form-field>
 
-        <input matInput type="email" name="email" placeholder="Email" ngModel #email="ngModel" required minlength="3"
-          maxlength="20" email>
+        <input matInput type="email" name="email" placeholder="Email" ngModel [ngModelOptions]="{updateOn: 'blur'}"
+          #email="ngModel" required minlength="3" maxlength="20" email (ngModelChange)="onEmailChange($event)">
         @if (email.hasError('required')) {
         <mat-error>Email is required.</mat-error>
         } @if (email.hasError('minlength')) {
@@ -34,7 +36,8 @@
 
     </form>
 
-    <!-- <div class="form-val">{{ loginForm.value | json }}</div> -->
+    <div class="form-val">{{ loginForm.value | json }}</div>
 
   </mat-card-content>
+
 </mat-card>

src/app/login/login.component.ts

@@ -15,4 +15,9 @@ export class LoginComponent implements OnInit {
   login(loginForm: NgForm, submit: SubmitEvent) {
     console.log(loginForm.value, loginForm.valid, submit);
   }
+
+  onEmailChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    console.log(input.value);
+  }
 }