form array completed

actionanand · Oct 4, 2024 · 7183b77 · 7183b77
1 parent 77e19c4
commit 7183b77
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git 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,43 +85,43 @@ <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>

diff --git 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() {