form array completed

Author: actionanand

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>

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