From 16ccb9bdcbb23f16a1bf2ef6bea459255dd516f8 Mon Sep 17 00:00:00 2001
From: Anand raja <meetanandns@gmail.com>
Date: Fri, 4 Oct 2024 08:08:11 +0000
Subject: [PATCH 1/3] refactoring

---
 src/app/reactive/login/login.component.ts     | 10 +++++++++-
 src/app/reactive/signup/signup.component.html | 16 +++++++++------
 src/app/reactive/signup/signup.component.ts   | 20 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/app/reactive/login/login.component.ts b/src/app/reactive/login/login.component.ts
index 09a5d9d..3b8a99a 100644
--- a/src/app/reactive/login/login.component.ts
+++ b/src/app/reactive/login/login.component.ts
@@ -8,7 +8,7 @@ const reqSymbol = '?';
 const reservedEmail = 'ar@example.com';
 
 function isPasswordContainReqChar(control: AbstractControl) {
-  if (control.value.includes(reqSymbol)) {
+  if (control.value?.includes(reqSymbol)) {
     return null;
   } else {
     return { PassNotHaveSymbol: true };
@@ -86,6 +86,14 @@ export class LoginComponent2 implements OnInit {
   }
 
   onSubmit() {
+    if (this.formObj.invalid) {
+      return;
+    }
+
     // this.formObj.controls.emailField.addValidators
+    console.log('this.formObj.controls.emailField => ', this.formObj.controls.emailField);
+    console.log('this.formObj.value => ', this.formObj.value);
+
+    this.formObj.reset();
   }
 }
diff --git a/src/app/reactive/signup/signup.component.html b/src/app/reactive/signup/signup.component.html
index e8949b4..d823d05 100644
--- a/src/app/reactive/signup/signup.component.html
+++ b/src/app/reactive/signup/signup.component.html
@@ -1,21 +1,25 @@
-<form>
+<form [formGroup]="formObj" (ngSubmit)="onSubmit()">
   <h2>Welcome on board!</h2>
   <p>We just need a little bit of data from you to get you started 🚀</p>
 
   <div class="control">
     <label for="email">Email</label>
-    <input id="email" type="email" name="email" />
+    <input id="email" type="email" name="email" [formControl]="formObj.controls.email" />
   </div>
 
-  <div class="control-row">
+  <div class="control-row" formGroupName="passwords">
     <div class="control">
       <label for="password">Password</label>
-      <input id="password" type="password" name="password" />
+      <input
+        id="password"
+        type="password"
+        name="password"
+        [formControl]="formObj.controls.passwords.controls.password" />
     </div>
 
     <div class="control">
       <label for="confirm-password">Confirm Password</label>
-      <input id="confirm-password" type="password" name="confirm-password" />
+      <input id="confirm-password" type="password" name="confirm-password" formControlName="confirmPass" />
     </div>
   </div>
 
@@ -126,7 +130,7 @@ <h2>Welcome on board!</h2>
   </div>
 
   <p class="form-actions">
-    <button type="reset" class="button button-flat">Reset</button>
+    <button type="reset" class="button button-flat" (click)="onReset()">Reset</button>
     <button type="submit" class="button">Sign up</button>
   </p>
 </form>
diff --git a/src/app/reactive/signup/signup.component.ts b/src/app/reactive/signup/signup.component.ts
index 94d9915..daa76f9 100644
--- a/src/app/reactive/signup/signup.component.ts
+++ b/src/app/reactive/signup/signup.component.ts
@@ -1,9 +1,27 @@
 import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-signup',
   standalone: true,
+  imports: [ReactiveFormsModule],
   templateUrl: './signup.component.html',
   styleUrl: './signup.component.css',
 })
-export class SignupComponent {}
+export class SignupComponent {
+  formObj = new FormGroup({
+    email: new FormControl(''),
+    passwords: new FormGroup({
+      password: new FormControl(''),
+      confirmPass: new FormControl(''),
+    }),
+  });
+
+  onSubmit() {
+    console.log(this.formObj.value);
+  }
+
+  onReset() {
+    this.formObj.reset();
+  }
+}

From 77e19c405a444c19c15032212a01b8554b183d54 Mon Sep 17 00:00:00 2001
From: Anand raja <meetanandns@gmail.com>
Date: Fri, 4 Oct 2024 08:37:45 +0000
Subject: [PATCH 2/3] complex form started

---
 src/app/reactive/signup/signup.component.html | 24 ++++++-------
 src/app/reactive/signup/signup.component.ts   | 36 ++++++++++++++++---
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/app/reactive/signup/signup.component.html b/src/app/reactive/signup/signup.component.html
index d823d05..7d7f489 100644
--- a/src/app/reactive/signup/signup.component.html
+++ b/src/app/reactive/signup/signup.component.html
@@ -4,17 +4,15 @@ <h2>Welcome on board!</h2>
 
   <div class="control">
     <label for="email">Email</label>
-    <input id="email" type="email" name="email" [formControl]="formObj.controls.email" />
+    <!-- [formControl]="formObj.controls.email"  we can register 'control' like this also -->
+    <input id="email" type="email" name="email" formControlName="email" />
   </div>
 
   <div class="control-row" formGroupName="passwords">
     <div class="control">
       <label for="password">Password</label>
-      <input
-        id="password"
-        type="password"
-        name="password"
-        [formControl]="formObj.controls.passwords.controls.password" />
+      <!-- [formControl]="formObj.controls.passwords.controls.password" we can register 'control' like this also -->
+      <input id="password" type="password" name="password" formControlName="password" />
     </div>
 
     <div class="control">
@@ -29,39 +27,39 @@ <h2>Welcome on board!</h2>
     <div class="control-row">
       <div class="control">
         <label for="first-name">First Name</label>
-        <input type="text" id="first-name" name="first-name" />
+        <input type="text" id="first-name" name="first-name" formControlName="firstName" />
       </div>
 
       <div class="control">
         <label for="last-name">Last Name</label>
-        <input type="text" id="last-name" name="last-name" />
+        <input type="text" id="last-name" name="last-name" formControlName="lastName" />
       </div>
     </div>
 
-    <fieldset>
+    <fieldset formGroupName="address">
       <legend>Your Address</legend>
 
       <div class="control-row">
         <div class="control">
           <label for="street">Street</label>
-          <input type="text" id="street" name="street" />
+          <input type="text" id="street" name="street" formArrayName="street" />
         </div>
 
         <div class="control">
           <label for="number">Number</label>
-          <input type="text" id="number" name="number" />
+          <input type="text" id="number" name="number" formControlName="number" />
         </div>
       </div>
 
       <div class="control-row">
         <div class="control">
           <label for="postal-code">Postal Code</label>
-          <input type="text" id="postal-code" name="postal-code" />
+          <input type="text" id="postal-code" name="postal-code" formControlName="postal" />
         </div>
 
         <div class="control">
           <label for="city">City</label>
-          <input type="text" id="city" name="city" />
+          <input type="text" id="city" name="city" formControlName="city" />
         </div>
       </div>
     </fieldset>
diff --git a/src/app/reactive/signup/signup.component.ts b/src/app/reactive/signup/signup.component.ts
index daa76f9..63d9306 100644
--- a/src/app/reactive/signup/signup.component.ts
+++ b/src/app/reactive/signup/signup.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-signup',
@@ -9,11 +9,39 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
   styleUrl: './signup.component.css',
 })
 export class SignupComponent {
+  protected readonly minPassLen = 5;
+
   formObj = new FormGroup({
-    email: new FormControl(''),
+    email: new FormControl('', {
+      validators: [Validators.required, Validators.email],
+    }),
     passwords: new FormGroup({
-      password: new FormControl(''),
-      confirmPass: new FormControl(''),
+      password: new FormControl('', {
+        validators: [Validators.required, Validators.minLength(this.minPassLen)],
+      }),
+      confirmPass: new FormControl('', {
+        validators: [Validators.required, Validators.minLength(this.minPassLen)],
+      }),
+    }),
+    firstName: new FormControl('', {
+      validators: [Validators.required],
+    }),
+    lastName: new FormControl('', {
+      validators: [Validators.required],
+    }),
+    address: new FormGroup({
+      street: new FormControl('', {
+        validators: [Validators.required],
+      }),
+      number: new FormControl('', {
+        validators: [Validators.required],
+      }),
+      postal: new FormControl('', {
+        validators: [Validators.required],
+      }),
+      city: new FormControl('', {
+        validators: [Validators.required],
+      }),
     }),
   });
 

From 7183b776772ef8876f8f0f77129cf549da4dcfd8 Mon Sep 17 00:00:00 2001
From: Anand raja <meetanandns@gmail.com>
Date: Fri, 4 Oct 2024 10:40:52 +0000
Subject: [PATCH 3/3] form array completed

---
 src/app/reactive/signup/signup.component.html | 20 +++++++++----------
 src/app/reactive/signup/signup.component.ts   | 13 ++++++++++--
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/app/reactive/signup/signup.component.html b/src/app/reactive/signup/signup.component.html
index 7d7f489..abcdb5b 100644
--- a/src/app/reactive/signup/signup.component.html
+++ b/src/app/reactive/signup/signup.component.html
@@ -42,7 +42,7 @@ <h2>Welcome on board!</h2>
       <div class="control-row">
         <div class="control">
           <label for="street">Street</label>
-          <input type="text" id="street" name="street" formArrayName="street" />
+          <input type="text" id="street" name="street" formControlName="street" />
         </div>
 
         <div class="control">
@@ -70,7 +70,7 @@ <h2>Welcome on board!</h2>
   <div class="control-row">
     <div class="control">
       <label for="role">What best describes your role?</label>
-      <select id="role" name="role">
+      <select id="role" name="role" formControlName="role">
         <option value="student">Student</option>
         <option value="teacher">Teacher</option>
         <option value="employee">Employee</option>
@@ -85,35 +85,35 @@ <h2>Welcome on board!</h2>
   <div class="control-row">
     <label for="role"> Your Gender </label>
     <div class="radio">
-      <input type="radio" id="male" name="genger" value="male" />
+      <input type="radio" id="male" name="gender" value="male" formControlName="gender" />
       <label for="html">Male</label>
     </div>
     <div class="radio">
-      <input type="radio" id="female" name="genger" value="female" />
+      <input type="radio" id="female" name="gender" value="female" formControlName="gender" />
       <label for="css">Female</label>
     </div>
     <div class="radio">
-      <input type="radio" id="others" name="genger" value="others" />
+      <input type="radio" id="others" name="gender" value="others" formControlName="gender" />
       <label for="html">Not Ready To Tell</label>
     </div>
   </div>
 
   <br />
 
-  <fieldset>
+  <fieldset formArrayName="source">
     <legend>How did you find us?</legend>
     <div class="control">
-      <input type="checkbox" id="google" name="acquisition" value="google" />
+      <input type="checkbox" id="google" name="acquisition" value="google" formControlName="0" />
       <label for="google">Google</label>
     </div>
 
     <div class="control">
-      <input type="checkbox" id="friend" name="acquisition" value="friend" />
+      <input type="checkbox" id="friend" name="acquisition" value="friend" formControlName="1" />
       <label for="friend">Referred by friend</label>
     </div>
 
     <div class="control">
-      <input type="checkbox" id="other" name="acquisition" value="other" />
+      <input type="checkbox" id="other" name="acquisition" value="other" formControlName="2" />
       <label for="other">Other</label>
     </div>
   </fieldset>
@@ -121,7 +121,7 @@ <h2>Welcome on board!</h2>
   <div class="control-row">
     <div class="control">
       <label for="terms-and-conditions">
-        <input type="checkbox" id="terms-and-conditions" name="terms" />
+        <input type="checkbox" id="terms-and-conditions" name="terms" formControlName="agree" />
         I agree to the terms and conditions
       </label>
     </div>
diff --git a/src/app/reactive/signup/signup.component.ts b/src/app/reactive/signup/signup.component.ts
index 63d9306..ca5080f 100644
--- a/src/app/reactive/signup/signup.component.ts
+++ b/src/app/reactive/signup/signup.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-signup',
@@ -43,10 +43,19 @@ export class SignupComponent {
         validators: [Validators.required],
       }),
     }),
+    role: new FormControl<'student' | 'teacher' | 'employee' | 'founder' | 'other'>('student', {
+      validators: [Validators.required],
+    }),
+    gender: new FormControl<'male' | 'female' | 'others' | null>(null, {
+      validators: [Validators.required],
+    }),
+    source: new FormArray([new FormControl(false), new FormControl(false), new FormControl(false)]),
+    agree: new FormControl(false, { validators: [Validators.required] }),
   });
 
   onSubmit() {
-    console.log(this.formObj.value);
+    console.log('this.formObj => ', this.formObj);
+    console.log('this.formObj.value => ', this.formObj.value);
   }
 
   onReset() {