Merge pull request #5 from actionanand/features/2-reactive-form

Features/2 reactive form

Author: actionanand

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();
   }
 }

src/app/reactive/signup/signup.component.html

@@ -1,21 +1,23 @@
-<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" />
+    <!-- [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">
+  <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" we can register 'control' like this also -->
+      <input id="password" type="password" name="password" formControlName="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>
 
@@ -25,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" formControlName="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>
@@ -68,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>
@@ -83,50 +85,50 @@ <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>
 
   <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>
   </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>

src/app/reactive/signup/signup.component.ts

@@ -1,9 +1,64 @@
 import { Component } from '@angular/core';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } 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 {
+  protected readonly minPassLen = 5;
+
+  formObj = new FormGroup({
+    email: new FormControl('', {
+      validators: [Validators.required, Validators.email],
+    }),
+    passwords: new FormGroup({
+      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],
+      }),
+    }),
+    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 => ', this.formObj);
+    console.log('this.formObj.value => ', this.formObj.value);
+  }
+
+  onReset() {
+    this.formObj.reset();
+  }
+}