Need help in implementing look up functionality using angular with spring boot - angularjs

Question

I am new to angular JS and I have a requirement where I need to implement the look up functionality on modal-pop up dialog box.It is similar to finding bank branch using IFSC code lookup.I should be able to serach for a bank using bank name or IFSC code or branch name and then select the bank branch.Please assist.Any demo videos implementing this functionality will help me.
I do have a working code for modal pop-up.But am unable to proceed further.Please let me know if I have to share the code of what has been done so far.
Thanks,
Prashanth
Here is my html code
<div class="container" xmlns="http://www.w3.org/1999/html">
<div class="offset-3"></div>
<form name="form" #f="ngForm" (ngSubmit)="f.form.valid && saveData()" novalidate class="feedback-form">
<div class="row">
<div class="col">
<label for="accession">Accession</label>
<input type="text"
id="accession"
class="form-control"
name="accession"
[(ngModel)]="model.accession"/>
</div>
<div class="col">
<label for="template">Template</label>
<input type="text"
id="template"
class="form-control"
name="template"
[(ngModel)]="model.template"/>
</div>
<div class="col">
<label for="user">User</label>
<input type="text"
id="user"
class="form-control"
name="user"
[(ngModel)]="model.user"/>
</div>
<div class="col">
<label for="count">Count</label>
<input type="text"
id="count"
class="form-control"
name="count"
[(ngModel)]="model.count"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="firstName">First Name</label>
<input type="text"
id="firstName"
class="form-control"
name="firstName"
placeholder="Your firstName" [(ngModel)]="model.firstName"
#firstname="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && firstname.invalid }"
required maxlength="40"/>
<div *ngIf="f.submitted && firstname.invalid" class="invalid-input">
<div *ngIf="firstname.errors?.required">
First Name is required
</div>
<div *ngIf="firstname.errors?.maxlength">
First Name can have a maximum of 40 characters
</div>
</div>
</div>
<div class="col">
<label for="doctorNumber">Doctor Number</label>
<input type="text"
id="doctorNumber"
class="form-control"
name="doctorNumber"
placeholder="Your doctorNumber" [(ngModel)]="model.doctorNumber"
(click)="open(content)"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="lastName">Last Name</label>
<input type="text"
id="lastName"
class="form-control"
name="lastName"
placeholder="Your lastName" [(ngModel)]="model.lastName"
#lastName="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && lastName.invalid }"
required maxlength="40"/>
<div *ngIf="f.submitted && lastName.invalid" class="invalid-input">
<div *ngIf="lastName.errors?.required">
Last Name is required
</div>
<div *ngIf="lastName.errors?.maxlength">
Last Name can have a maximum of 40 characters
</div>
</div>
</div>
<div class="col">
<label for="collectionCenter">Collection Center</label>
<input type="text"
id="collectionCenter"
class="form-control"
name="collectionCenter"
[(ngModel)]="model.collectionCenter" #collectionCenter="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && collectionCenter.invalid }"
required minlength="5" (keypress)="OnlyNumbersAllowed($event)"/>
<div *ngIf="f.submitted && collectionCenter.invalid" class="invalid-input">
<div *ngIf="collectionCenter.errors?.required">
Collection Center is required
</div>
<div *ngIf="collectionCenter.errors?.minlength">
Collection Center should be 5 digits in length
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="middleName">Middle Name</label>
<input type="text"
id="middleName"
class="form-control"
name="middleName"
placeholder="Your MiddleName" [(ngModel)]="model.middleName"/>
</div>
<div class="col">
<label for="state">State</label>
<input type="text"
id="state"
class="form-control"
name="state"
[(ngModel)]="model.state"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="sex">
Sex
</label>
<select id="sex" name="sex"
[(ngModel)]="model.sex" class="form-control">
<option *ngFor = "let sex of sexList" [ngValue]="sex.value">
{{sex.value}}
</option>
</select>
</div>
<div class="col">
<label for="billTo">Bill To</label>
<input type="text"
id="billTo"
class="form-control"
name="billTo"
[(ngModel)]="model.billTo" #billTo="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && billTo.invalid }"
minlength="3" maxlength="5"/>
<div *ngIf="f.submitted && billTo.invalid" class="invalid-input">
<div *ngIf="billTo.errors?.minlength">
Bill To should have a minimum of 3 characters
</div>
<div *ngIf="billTo.errors?.maxlength">
Bill To can have a maximum of 5 characters
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="dateOfBirth">Date Of Birth</label>
<input type="text" bsDatepicker [bsConfig]="datePickerConfig"
id="dateOfBirth"
class="form-control"
name="dateOfBirth"
[(ngModel)]="model.dateOfBirth"
#dateOfBirth="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && dateOfBirth.invalid }"
required/>
<div *ngIf="f.submitted && dateOfBirth.invalid" class="invalid-input">
<div *ngIf="dateOfBirth.errors?.required">
Date Of Birth is required
</div>
</div>
</div>
<div class="col">
<label for="bioRefId">BioRef ID</label>
<input type="text"
id="bioRefId"
class="form-control"
name="bioRefId"
[(ngModel)]="model.bioRefId"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="receivedDate">Received Date</label>
<input type="text" bsDatepicker [bsConfig]="datePickerConfig"
id="receivedDate"
class="form-control"
name="receivedDate"
[(ngModel)]="model.receivedDate"
#receivedDate="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && receivedDate.invalid }"
required/>
<div *ngIf="f.submitted && receivedDate.invalid" class="invalid-input">
<div *ngIf="receivedDate.errors?.required">
Received Date is required
</div>
</div>
</div>
<div class="col">
<label for="pid">PID</label>
<input type="text"
id="pid"
class="form-control"
name="pid"
[(ngModel)]="model.pid" #pid="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && pid.invalid }" maxlength="30"/>
<div *ngIf="f.submitted && pid.invalid" class="invalid-input">
<div *ngIf="pid.errors?.maxlength">
Patient Medical Record Number can have a maximum of 40 characters
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="receivedTime">Received Time</label>
<input type="text"
id="receivedTime"
class="form-control"
name="receivedTime"
[(ngModel)]="model.receivedTime"/>
</div>
<div class="col">
<label for="antiCoagulant">Anti-Coagulant</label>
<input type="text"
id="antiCoagulant"
class="form-control"
name="antiCoagulant"
[(ngModel)]="model.antiCoagulant"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="collectionDate">Collection Date</label>
<input type="text" bsDatepicker [bsConfig]="datePickerConfig"
id="collectionDate"
class="form-control"
name="collectionDate"
[(ngModel)]="model.collectionDate" #collectionDate="ngModel"
[ngClass]="{ 'is-invalid' : f.submitted && collectionDate.invalid }"
required/>
<div *ngIf="f.submitted && collectionDate.invalid" class="invalid-input">
<div *ngIf="collectionDate.errors?.required">
Collection Date is required
</div>
</div>
</div>
<div class="col">
<label for="specimenType">
Specimen Type
</label>
<select id="specimenType" name="specimenType"
[(ngModel)]="model.specimenType" class="form-control">
<option *ngFor = "let spt of specimenTypeList" [ngValue]="spt.value">
{{spt.value}}
</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<label for="collectionTime">Collection Time</label>
<input type="text"
id="collectionTime"
class="form-control"
name="collectionTime"
[(ngModel)]="model.collectionTime"/>
</div>
<div class="col">
<label for="gptCode">GP Test Code</label>
<input type="text"
id="gptCode"
class="form-control"
name="gptCode"
[(ngModel)]="model.gptCode"/>
</div>
</div>
<div style="text-align:center">
<button type="submit" class="btn">
<span> Save</span>
</button>
</div>
</form>
<div class="offset-3"></div>
</div>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Find Doctor</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #f="ngForm">
<div class="row">
<div class="col">
<label for="lastname">Last Name</label>
<div class="input-group">
<input id="lastname" class="form-control" >
</div>
</div>
<div class="col">
<label for="upin">UPIN</label>
<div class="input-group">
<input id="upin" class="form-control" >
</div>
</div>
<div class="col">
<label for="code">Code</label>
<div class="input-group">
<input id="code" class="form-control" >
</div>
</div>
<div class="col">
<button type="submit" id="find" class="btn">
<span>Find</span>
</button>
</div>
</div>
<div class="row">
<div class="col">
<label for="firstname">First Name</label>
<div class="input-group">
<input id="firstname" class="form-control" >
</div>
</div>
<div class="col">
<label for="state">State</label>
<div class="input-group">
<input id="state" class="form-control" >
</div>
</div>
<div class="col">
<label for="extcode">Ext Code</label>
<div class="input-group">
<input id="extcode" class="form-control" >
</div>
</div>
<div class="col">
<button type="submit" id="Cancel" class="btn">
<span>Cancel</span>
</button>
</div>
</div>
</form>
</div>
</ng-template>
Here is my ts code
import { Component,OnInit } from '#angular/core';
import {HttpClient} from "#angular/common/http";
import {ModalDismissReasons, NgbModal} from '#ng-bootstrap/ng-bootstrap';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { Sex } from '../models/sex.model';
import { SpecimenType } from '../models/specimenType.model';
#Component({
selector: 'app-direct-client-trf',
templateUrl: './direct-client-trf.component.html',
styleUrls: ['./direct-client-trf.component.css']
})
export class DirectClientTRFComponent implements OnInit {
closeResult: string;
OnlyNumbersAllowed(event:any){
const charCode = (event.which)?event.which:event.keycode;
if(charCode > 31 && (charCode < 48 || charCode > 57)){
console.log('charCode is restricted'+charCode);
return false;
}
return true;
}
datePickerConfig: Partial<BsDatepickerConfig>;
specimenTypeList:SpecimenType[] = [
{id: 1,value: 'P'},
{id: 2,value: 'W'}
];
sexList:Sex[] = [
{id: 1,value: 'M:Male'},
{id: 2,value: 'F:Female'},
{id: 3,value: 'U:Unknown'}
];
model:DirectTrfViewModel = {
accession:'',
template:'',
user:'',
count:'',
firstName:'',
lastName:'',
middleName:'',
sex:'',
dateOfBirth:'',
receivedDate:'',
receivedTime:'',
collectionDate:'',
collectionTime:'',
doctorNumber:'',
collectionCenter:'',
state:'',
billTo:'',
bioRefId:'',
pid:'',
antiCoagulant:'',
specimenType:'',
gptCode:''
};
constructor(private http:HttpClient,private modalService: NgbModal){
this.datePickerConfig = Object.assign({},
{
containerClass : 'theme-dark-blue',
showWeekNumbers: false,
dateInputFormat: 'MM/DD/YYYY'
});
}
ngOnInit(){
}
saveData():void{
let url = 'http://localhost:8080/api/directtrfsubmit';
this.http.post(url,this.model).subscribe(
res => {
location.reload();
},
err => {
alert('Error in saving data');
}
);
}
open(content:any) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
export interface DirectTrfViewModel{
accession:string,
template:string,
user:string,
count:string,
firstName:string;
lastName:string;
middleName:string;
sex:string;
dateOfBirth:string;
receivedDate:string;
receivedTime:string;
collectionDate:string;
collectionTime:string;
doctorNumber:string;
collectionCenter:string;
state:string;
billTo:string;
bioRefId:string;
pid:string;
antiCoagulant:string;
specimenType:string;
gptCode:string;
}
With this the modal pop-up opens up and I need help in implementing the remaining functionality.