add validation

src/app/annual-health-checkup/add-dependants/add-dependants.component.html

@@ -9,26 +9,26 @@
     <div *ngFor="let item of counterArr; let i=index">
     <div class="align-middle">
         <mat-form-field class="input-field" appearance="outline">
-            <mat-label>Name of Dependant {{i+1}}</mat-label>
+            <mat-label>Name of Dependant {{i+1}} *</mat-label>
             <input formControlName="nameOfDependant" matInput placeholder="Name of Dependant"  value="1234">
         </mat-form-field>
     </div>
     <div class="align-middle">
         <mat-form-field class="input-field" appearance="outline">
-            <mat-label>Relation of Employee with Dependant {{i+1}}</mat-label>
+            <mat-label>Relation of Employee with Dependant {{i+1}} *</mat-label>
             <input formControlName="employeeRelation" matInput placeholder="Relation of Employee"  value="bajaj">
         </mat-form-field>
     </div>
     <div class="align-middle">
         <mat-form-field class="input-field" appearance="outline">
-            <mat-label>Age of Dependant {{i+1}}</mat-label>
+            <mat-label>Age of Dependant {{i+1}} *</mat-label>
             <input formControlName="age" matInput placeholder="Age"  value="developer">
         </mat-form-field>
     </div>
     <div class="align-middle">
             <mat-form-field class="input-field" appearance="fill">
-                <mat-label>Gender of Dependant {{i+1}}</mat-label>
-                <mat-select>
+                <mat-label>Gender of Dependant {{i+1}} *</mat-label>
+                <mat-select  (selectionChange)="selectGender($event)">
                   <mat-option *ngFor="let gender of genderList" [value]="gender">
                     {{gender}}
                   </mat-option>

src/app/annual-health-checkup/add-dependants/add-dependants.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { MatSelectChange } from "@angular/material/select";
 import { Router } from "@angular/router";
 import { GENDER_LIST, SCHEDULE_APPOINTMENT } from "src/constants/constants";
 import { ScheduleAppointmentService } from "../schedule-appointment/schedule-appointment.service";
@@ -29,15 +30,42 @@ export class AddDependantsComponent implements OnInit {
 
   createNewForm(): void {
     this.addDependantForm = this.formBuilder.group({
-      nameOfDependant: ["John"],
-      employeeRelation: ["Brother"],
-      age: ["34"],
-      gender: ["Male"],
+      nameOfDependant: [''],
+      employeeRelation: [''],
+      age: [''],
+      gender: [''],
     });
   }
 
   createEnquirySubmitHandler() {
-    if (this.counterArr.length < 6) {
+    this.isMaxCount = false;
+    let responeObj = this.addDependantForm.value;
+    let isValidObj = {
+      isValid:false,
+      isNameValid:false,
+      isEmployeeRelation:false,
+      isAgeValid:false,
+      isGenderValid:false
+    }
+    if(responeObj.nameOfDependant.length > 0){
+      isValidObj.isNameValid =  true;
+    }
+    if(responeObj.employeeRelation.length > 0){
+      isValidObj.isEmployeeRelation =  true;
+    }
+    if(responeObj.age.length > 0){
+      isValidObj.isAgeValid =  true;
+    }
+    if(responeObj.gender.length > 0){
+      isValidObj.isGenderValid =  true;
+    }
+
+    if(isValidObj.isNameValid && isValidObj.isEmployeeRelation && isValidObj.isAgeValid && isValidObj.isGenderValid){
+      isValidObj.isValid = true;
+    }
+
+    if (isValidObj.isValid && this.counterArr.length < 6) {
+      //this.createNewForm();
       this.counter++;
       this.counterArr.push(this.counter);
     } else {
@@ -55,4 +83,14 @@ export class AddDependantsComponent implements OnInit {
     this.scheduleAppointmentService.saveAdditionalDependentDetails(responseObject);
     this.router.navigate([SCHEDULE_APPOINTMENT]);
   }
+
+  selectGender(event:MatSelectChange){
+    let selectedData;
+    selectedData = {
+      value: event.value,
+      text: event.source.triggerValue,
+    };
+    //this.addDependantForm.form selectedData.value;
+    this.addDependantForm.get('gender')?.setValue(selectedData.value);
+  }
 }