Angular - How to display EmployeeName on Label when EmployeeCode is correct

In Angular-14 I have this code:

component.ts:

constructor(
private fb: FormBuilder,
private employeeService: EmployeeService,
private bsModalRef: BsModalRef,
private modalService: BsModalService
) {
}

ngOnInit(): void {

}

onSearch() {
this.accountValue = this.createForm.value.accountNumber;
if (this.accountValue !== undefined) {
if (this.accountValue.length === 6) {
this.employeeService.getEmployeeRecords(this.accountValue).subscribe({
next: (res: any) => {
this.allEmployeeDetail = res;
console.log(this.allEmployeeDetail);
this.isLoading = false;
},
error: (error) => {
this.isLoading = false;
}
})
}
}
}


component.html:

<div class="form-group">
<label for="employeeCode">Employee Code<span style="color:red;">*</span></label>
<input
type="text"
class="form-control"
formControlName='employeeCode'
id="employeeCoder"
(input)="onSearch()"
placeholder="employeeCode">
</div>

<label for="employeeName"></label>


console.log(this.allEmployeeDetail) gives as JSON response:

{
"EmployeeCode": "KKT001",
"EmployeeName": "AGBOR PTOLEMY"
}


employeeCode is 6 characters.

What I want to achieve is that when user enters the employeeCode into the text input, as soon as it's 6 characters, the employeeName of that particular employeeCode parameter should be displayed on the label employeeName. If it is not correct, it should display invalid.

How do I achieve this?

Thanks

Continue reading...