src/app/pages/admissions/students/student-guardian-form/student-guardian-form.component.html
<form [formGroup]="userIdentificaionForm">
<button mat-raised-button color="primary" type="button" (click)="addGuardians()">add</button>
<div formArrayName="guardians" style="display: flex; flex-direction: column-reverse">
<fieldset *ngFor="let guardian of guardians().controls; let i = index" [formGroupName]="i">
<legend>Enter Details for the {{ i + 1 | ordinal }} Guardian </legend>
<button type="button" style="float: right" (click)="removeGuadian(i)"
[disabled]="guardians().controls.length === 1" mat-button color="warn">remove</button>
<fieldset>
<legend>
<h2>Email and Phone Number</h2>
</legend>
<section class="d-flex justify-content-around">
<section class="col-sm-6 col-md-4 col-lg-3">
<mat-form-field>
<mat-icon matPrefix>email</mat-icon>
<label hidden attr.for="{{ 'email' + i }}"> Email </label>
<input (blur)="validateEmail(i)" id="{{ 'email' + i }}" type="text" placeholder="Email"
formControlName="email" matInput>
<mat-error *ngIf="errors.guardians[i]?.email">
{{ errors.guardians[i]?.email }}
</mat-error>
</mat-form-field>
</section>
<section class="col-sm-6 col-md-4 col-lg-3" *ngIf="confirmData[i]">
User with the email Exists. Do You wish to Use this Email?
<button (click)="updateFieldsForEmail(i)" style="margin-left: 15px" type="button" mat-raised-button
color="primary">Yes</button>
<button (click)="clearEmail(i)" style="margin-left: 15px" type="button" mat-raised-button
color="warn">No</button>
</section>
<section hidden class="col-sm-6 col-md-4 col-lg-3" *ngIf="idNumber" [hidden]="confirmData[i]">
Guardian Id Number: {{ idNumber }}
</section>
<section [hidden]="confirmData[i]" formGroupName="phoneDetails" class="col-sm-6 col-md-4 col-lg-3"
class="phone">
<mat-form-field style="width: 78px; float: left;">
<mat-select formControlName="phoneCode" (selectionChange)="updateSelectedPhone(i)"
[(value)]="selectedPhoneCode" (blur)="validatePhone(i)" id="{{ 'phoneCode' + i}}">
<mat-select-trigger>
<span class="flag-icon flag-icon-{{ selectedPhone.country | lowercase}}">
</span>(+{{ selectedPhone.code }})
</mat-select-trigger>
<mat-option *ngFor="let country of countries" [value]="country.code" selected>
<span class="flag-icon flag-icon-{{ country.country | lowercase}}"></span>
{{ country.country }} (+{{ country.code }})
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field style="max-width: 180px; float: left;">
<label hidden attr.for="{{ 'phoneNumber' + i}}"> Phone
Number
</label>
<input (keyup)="updatePhoneInputErrorState(i)" [errorStateMatcher]="phoneErrorMatcher"
(blur)="validatePhone(i)" id="{{ 'phoneNumber' + i}}" type="text" placeholder="Phone Number"
formControlName="phoneNumber" matInput>
<mat-error>
{{ errors.guardians[i]?.phone }}
</mat-error>
</mat-form-field>
</section>
<section class="col-sm-6 col-md-4 col-lg-3" *ngIf="!idNumber" [hidden]="confirmData[i]">
<label for="autogenerate-id-number">
Autogenerate Id Number <mat-checkbox type="checkbox" formControlName="autogenerateIdNumber"
id="autogenerate-id-number"></mat-checkbox>
</label>
</section>
<section col-sm-6 col-md-4 col-lg-3 [hidden]="confirmData[i]">
<mat-form-field *ngIf="!guardian.get('autogenerateIdNumber').value">
<label hidden attr.for="{{ 'idNumber' + i}}"><span class="material-icons" matPrefix>person</span> Id
Number</label>
<input (blur)="validateIdNumber(i)" id="{{ 'idNumber' + i}}" type="text" placeholder="Id Number"
formControlName="idNumber" matInput>
<mat-error *ngIf="errors.guardians[i]?.idNumber">
{{ errors.guardians[i]?.idNumber }}
</mat-error>
</mat-form-field>
</section>
</section>
</fieldset>
<fieldset [hidden]="confirmData[i]">
<legend>
<h2>Name</h2>
</legend>
<section class='row'>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'firstName' + i}}">
<span class="material-icons" matPrefix>person</span> First Name</label>
<input (blur)="validateFirstName(i)" id="{{ 'firstName' + i }}" type="text" placeholder="first Name"
formControlName="firstName" matInput>
<mat-error *ngIf="errors.guardians[i]?.firstName">
{{ errors.guardians[i]?.firstName }}
</mat-error>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'middleName' + i}}">Middle Name</label>
<input (blur)="validateMiddleName(i)" id="{{ 'middleName' + i }}" type="text" placeholder="Middle Name"
formControlName="middleName" matInput>
<mat-error *ngIf="errors.guardians[i]?.middleName">
{{ errors.guardians[i]?.middleName }}
</mat-error>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'lastName' + i}}">Last Name</label>
<input (blur)="validateLastName(i)" id="{{ 'lastName' + i}}" type="text" placeholder="Last Name"
formControlName="lastName" matInput>
<mat-error *ngIf="errors.guardians[i]?.lastName">
{{ errors.guardians[i]?.lastName }}
</mat-error>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'otherNames' + i }}">Other Names</label>
<input (blur)="validateOtherNames(i)" id="{{ 'otherNames' + i}}" type="text" placeholder="Other Names"
formControlName="otherNames" matInput>
<mat-error *ngIf="errors.guardians[i]?.otherNames">
{{ errors.guardians[i]?.lastName }}
</mat-error>
</mat-form-field>
</section>
</section>
</fieldset>
<fieldset [hidden]="confirmData[i]">
<legend>
<h2>Other Details</h2>
</legend>
<section class='row'>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'relation' + i}}">
<span class="material-icons" matPrefix>person</span>Relation To Student</label>
<input (keyup)="validateRelation(i)" id="{{ 'relation' + i }}" type="text"
placeholder="Relationship To Student" formControlName="relation" matInput>
<mat-error *ngIf="errors.guardians[i]?.relation">
{{ errors.guardians[i]?.relation }}
</mat-error>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="gender">Gender</label>
<mat-select id="{{ 'gender' + i}}" formControlName="gender" placeholder="Gender">
<mat-option *ngFor="let gender of genders" [value]="gender.id">
{{ gender.name }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<input matInput [matDatepicker]="dateOfBirth" placeholder="Date Of Birth" formControlName="dateOfBirth"
(blur)="validateDateOfBirth(i)">
<mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
<mat-datepicker #dateOfBirth></mat-datepicker>
<mat-error *ngIf="errors.guardians[i]?.dateOfBirth">
{{ errors.guardians[i]?.dateOfBirth }}
</mat-error>
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<input matInput placeholder="Birth Certificate Number" formControlName="birthCertNumber">
</mat-form-field>
</section>
<section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
<mat-form-field>
<label hidden attr.for="{{ 'religion' + i}}">Religion</label>
<mat-select id="{{ 'religion' + i}}" formControlName="religion" placeholder="Religion">
<mat-option *ngFor="let religion of religions" [value]="religion.id">
{{ religion.name }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
</section>
</fieldset>
</fieldset>
</div>
</form>