Skip to content

Implement KYC Onboarding Form for Employee Data Entry #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implement KYC Onboarding Form for Employee Data Entry #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsComponent } from './forms/forms.component';
import { KycOnboardingComponent } from './kyc/kyc-onboarding.component';

const routes: Routes = [
{ path: '', component: FormsComponent }
{ path: '', component: KycOnboardingComponent },
{ path: 'demo-forms', component: FormsComponent }
];

@NgModule({
Expand Down
4 changes: 3 additions & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsComponent } from './forms/forms.component';
import { KycOnboardingComponent } from './kyc/kyc-onboarding.component';

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
Expand All @@ -18,7 +19,8 @@ import { MatSelectModule } from '@angular/material/select';
@NgModule({
declarations: [
AppComponent,
FormsComponent
FormsComponent,
KycOnboardingComponent
],
imports: [
BrowserModule,
Expand Down
328 changes: 328 additions & 0 deletions src/app/kyc/kyc-onboarding.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,328 @@
<div class="container" [formGroup]="kycForm">
<h1 class="page-title">Employee KYC Onboarding</h1>

<form (ngSubmit)="submit()">

<h2 class="section-title">Personal Information</h2>
<div class="section" formGroupName="personalInfo">
<div class="row">
<mat-form-field class="col half">
<mat-label>First Name</mat-label>
<input matInput formControlName="firstName" required>
<mat-error *ngIf="kycForm.get('personalInfo.firstName').invalid && kycForm.get('personalInfo.firstName').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Middle Name</mat-label>
<input matInput formControlName="middleName">
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Last Name</mat-label>
<input matInput formControlName="lastName" required>
<mat-error *ngIf="kycForm.get('personalInfo.lastName').invalid && kycForm.get('personalInfo.lastName').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Email</mat-label>
<input matInput type="email" formControlName="email" required>
<mat-error *ngIf="kycForm.get('personalInfo.email').invalid && kycForm.get('personalInfo.email').touched">Enter a valid email</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Phone</mat-label>
<input matInput formControlName="phone" placeholder="+1 555 123 4567" required>
<mat-error *ngIf="kycForm.get('personalInfo.phone').invalid && kycForm.get('personalInfo.phone').touched">Enter a valid phone</mat-error>
</mat-form-field>

<mat-form-field class="col quarter">
<mat-label>Gender</mat-label>
<mat-select formControlName="gender" required>
<mat-option *ngFor="let g of genders" [value]="g">{{ g }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('personalInfo.gender').invalid && kycForm.get('personalInfo.gender').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col quarter">
<mat-label>Date of Birth</mat-label>
<input matInput [matDatepicker]="dobPicker" formControlName="dob" required>
<mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
<mat-datepicker #dobPicker></mat-datepicker>
<mat-error *ngIf="kycForm.get('personalInfo.dob').invalid && kycForm.get('personalInfo.dob').touched">Required</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Marital Status</mat-label>
<mat-select formControlName="maritalStatus">
<mat-option *ngFor="let m of maritalStatuses" [value]="m">{{ m }}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Nationality</mat-label>
<mat-select formControlName="nationality" required>
<mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('personalInfo.nationality').invalid && kycForm.get('personalInfo.nationality').touched">Required</mat-error>
</mat-form-field>
</div>
</div>

<h2 class="section-title">Government Identity</h2>
<div class="section" formGroupName="identity">
<div class="row">
<mat-form-field class="col quarter">
<mat-label>ID Type</mat-label>
<mat-select formControlName="idType" required>
<mat-option value="Passport">Passport</mat-option>
<mat-option value="National ID">National ID</mat-option>
<mat-option value="Driver License">Driver License</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('identity.idType').invalid && kycForm.get('identity.idType').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>ID Number</mat-label>
<input matInput formControlName="idNumber" required>
<mat-error *ngIf="kycForm.get('identity.idNumber').invalid && kycForm.get('identity.idNumber').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col quarter">
<mat-label>Issued Country</mat-label>
<mat-select formControlName="idIssuedCountry" required>
<mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('identity.idIssuedCountry').invalid && kycForm.get('identity.idIssuedCountry').touched">Required</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Issue Date</mat-label>
<input matInput [matDatepicker]="issuePicker" formControlName="idIssuedDate" required>
<mat-datepicker-toggle matSuffix [for]="issuePicker"></mat-datepicker-toggle>
<mat-datepicker #issuePicker></mat-datepicker>
<mat-error *ngIf="kycForm.get('identity.idIssuedDate').invalid && kycForm.get('identity.idIssuedDate').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Expiry Date</mat-label>
<input matInput [matDatepicker]="expPicker" formControlName="idExpiryDate">
<mat-datepicker-toggle matSuffix [for]="expPicker"></mat-datepicker-toggle>
<mat-datepicker #expPicker></mat-datepicker>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Tax ID (Optional)</mat-label>
<input matInput formControlName="taxId">
</mat-form-field>
</div>
</div>

<h2 class="section-title">Residential Address</h2>
<div class="section" formGroupName="address">
<div class="row">
<mat-form-field class="col full">
<mat-label>Address Line 1</mat-label>
<input matInput formControlName="line1" required>
<mat-error *ngIf="kycForm.get('address.line1').invalid && kycForm.get('address.line1').touched">Required</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col full">
<mat-label>Address Line 2</mat-label>
<input matInput formControlName="line2">
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col third">
<mat-label>City</mat-label>
<input matInput formControlName="city" required>
<mat-error *ngIf="kycForm.get('address.city').invalid && kycForm.get('address.city').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>State/Province</mat-label>
<mat-select formControlName="state" required>
<mat-option *ngFor="let s of states" [value]="s">{{ s }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('address.state').invalid && kycForm.get('address.state').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Postal Code</mat-label>
<input matInput formControlName="postalCode" required>
<mat-error *ngIf="kycForm.get('address.postalCode').invalid && kycForm.get('address.postalCode').touched">Required</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Country</mat-label>
<mat-select formControlName="country" required>
<mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('address.country').invalid && kycForm.get('address.country').touched">Required</mat-error>
</mat-form-field>
</div>
</div>

<h2 class="section-title">Employment Details</h2>
<div class="section" formGroupName="employment">
<div class="row">
<mat-form-field class="col third">
<mat-label>Employee ID</mat-label>
<input matInput formControlName="employeeId" required>
<mat-error *ngIf="kycForm.get('employment.employeeId').invalid && kycForm.get('employment.employeeId').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Department</mat-label>
<input matInput formControlName="department" required>
<mat-error *ngIf="kycForm.get('employment.department').invalid && kycForm.get('employment.department').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Designation</mat-label>
<input matInput formControlName="designation" required>
<mat-error *ngIf="kycForm.get('employment.designation').invalid && kycForm.get('employment.designation').touched">Required</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col third">
<mat-label>Employment Type</mat-label>
<mat-select formControlName="employmentType" required>
<mat-option *ngFor="let e of employmentTypes" [value]="e">{{ e }}</mat-option>
</mat-select>
<mat-error *ngIf="kycForm.get('employment.employmentType').invalid && kycForm.get('employment.employmentType').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Date of Joining</mat-label>
<input matInput [matDatepicker]="dojPicker" formControlName="dateOfJoining" required>
<mat-datepicker-toggle matSuffix [for]="dojPicker"></mat-datepicker-toggle>
<mat-datepicker #dojPicker></mat-datepicker>
<mat-error *ngIf="kycForm.get('employment.dateOfJoining').invalid && kycForm.get('employment.dateOfJoining').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Annual CTC</mat-label>
<input matInput formControlName="annualCTC" placeholder="e.g. 120000" required>
<mat-error *ngIf="kycForm.get('employment.annualCTC').invalid && kycForm.get('employment.annualCTC').touched">Enter a valid amount</mat-error>
</mat-form-field>
</div>
</div>

<h2 class="section-title">Bank Details</h2>
<div class="section" formGroupName="bankDetails">
<div class="row">
<mat-form-field class="col half">
<mat-label>Account Holder Name</mat-label>
<input matInput formControlName="accountHolderName" required>
<mat-error *ngIf="kycForm.get('bankDetails.accountHolderName').invalid && kycForm.get('bankDetails.accountHolderName').touched">Required</mat-error>
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Bank Name</mat-label>
<input matInput formControlName="bankName" required>
<mat-error *ngIf="kycForm.get('bankDetails.bankName').invalid && kycForm.get('bankDetails.bankName').touched">Required</mat-error>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col third">
<mat-label>Account Number</mat-label>
<input matInput formControlName="accountNumber" required>
<mat-error *ngIf="kycForm.get('bankDetails.accountNumber').invalid && kycForm.get('bankDetails.accountNumber').touched">Enter a valid account</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>IFSC/SWIFT</mat-label>
<input matInput formControlName="ifscOrSwift" required>
<mat-error *ngIf="kycForm.get('bankDetails.ifscOrSwift').invalid && kycForm.get('bankDetails.ifscOrSwift').touched">Enter a valid code</mat-error>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Branch (Optional)</mat-label>
<input matInput formControlName="branch">
</mat-form-field>
</div>
</div>

<h2 class="section-title">Emergency Contacts</h2>
<div class="section">
<div formArrayName="emergencyContacts">
<div class="emergency-card" *ngFor="let group of emergencyContacts.controls; let i = index" [formGroupName]="i">
<div class="row">
<mat-form-field class="col third">
<mat-label>Name</mat-label>
<input matInput formControlName="name" required>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Relationship</mat-label>
<mat-select formControlName="relationship" required>
<mat-option *ngFor="let r of relationshipTypes" [value]="r">{{ r }}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="col third">
<mat-label>Phone</mat-label>
<input matInput formControlName="phone" required>
</mat-form-field>
</div>

<div class="row">
<mat-form-field class="col half">
<mat-label>Email (Optional)</mat-label>
<input matInput formControlName="email">
</mat-form-field>

<mat-form-field class="col half">
<mat-label>Address (Optional)</mat-label>
<input matInput formControlName="address">
</mat-form-field>
</div>

<div class="row actions">
<button mat-stroked-button color="warn" type="button" (click)="removeEmergencyContact(i)" [disabled]="emergencyContacts.length === 1">Remove</button>
</div>
</div>
</div>

<button mat-stroked-button color="primary" type="button" (click)="addEmergencyContact()">Add another contact</button>
</div>

<h2 class="section-title">Declarations</h2>
<div class="section" formGroupName="declarations">
<div class="checkbox-row">
<mat-checkbox formControlName="politicallyExposed">I am a Politically Exposed Person (PEP)</mat-checkbox>
</div>
<div class="checkbox-row">
<mat-checkbox formControlName="hasCriminalRecord">I have a criminal record</mat-checkbox>
</div>
<div class="checkbox-row">
<mat-checkbox formControlName="acceptsPolicies" required>
I confirm that the information provided is true and agree to the company's policies.
</mat-checkbox>
<mat-error *ngIf="kycForm.get('declarations.acceptsPolicies').invalid && kycForm.get('declarations.acceptsPolicies').touched">
You must accept to proceed.
</mat-error>
</div>
</div>

<div class="submit-row">
<button mat-raised-button color="primary" type="submit" [disabled]="kycForm.invalid">Submit KYC</button>
</div>
</form>
</div>
Loading