extra lessons on Angular 14 Typed Forms

Author: jhades

src/app/login-reactive/login-reactive.component.html

@@ -43,10 +43,14 @@
 
         </ng-container>
 
-      <button mat-raised-button color="primary" [disabled]="!form.valid">
+      <button mat-raised-button color="primary" [disabled]="!form.valid" (click)="login()">
         Login
       </button>
 
+      <button mat-raised-button   (click)="reset()">
+        Reset
+      </button>
+
     </form>
 
       <div class="form-val">

src/app/login-reactive/login-reactive.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup, NonNullableFormBuilder, Validators} from '@angular/forms';
 import {createPasswordStrengthValidator} from '../validators/password-strength.validator';
 
 
@@ -11,15 +11,14 @@ import {createPasswordStrengthValidator} from '../validators/password-strength.v
 export class LoginReactiveComponent implements OnInit {
 
    form = this.fb.group({
-      email: ['', {
-          validators: [Validators.required, Validators.email],
-          updateOn: 'blur'
-      }],
+      email: ["", {
+        validators: [Validators.required, Validators.email],
+        updateOn: 'blur'}],
       password: ['', [Validators.required, Validators.minLength(8),
                         createPasswordStrengthValidator()]]
    });
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: NonNullableFormBuilder) {
 
 
   }
@@ -36,4 +35,26 @@ export class LoginReactiveComponent implements OnInit {
       return this.form.controls['password'];
   }
 
+  login() {
+
+  }
+
+  reset() {
+    this.form.reset();
+
+    console.log(this.form.value);
+
+  }
 }
+
+
+
+
+
+
+
+
+
+
+
+