In Angular-14, I am working on a project that inserts using data into the database. Then validate the account number from third party api.
component.ts:
ngOnInit(): void {
this.createMerchant();
}
createMerchant() {
this.createMerchantForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50), UsernameValidator.cannotContainSpace]],
merchantName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]],
email: ['', [Validators.required, Validators.pattern('^[a-z0-9._% -] @[a-z0-9.-] \\.[a-z]{2,4}$')]],
accountNumber: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern('^[0-9]*$')]],
})
onMerchantSubmitForm() {
this.isSubmitted = true;
if (this.createMerchantForm.invalid) {
return;
}
this.isLoading = true;
const formData = this.createMerchantForm.value;
this.merchantService.createMerchant(formData).subscribe({
next: (res: any) => {
this.toastr.success(res.message);
this.isLoading = false;
this.onClose();
},
error: (error) => {
let errorMessage = '';
if(error.error instanceof ErrorEvent) {
errorMessage = error.message;
} else {
errorMessage = error.error.message;
}
this.toastr.error(errorMessage);
this.isLoading = false;
}
})
}
component.html:
<form id="add-form" [formGroup]="createMerchantForm" (ngSubmit)="onMerchantSubmitForm()">
<div >
<div >
<div >
<div >
<label for="userName">User Name<span style="color:red;">*</span></label>
<input type="text" formControlName='userName' id="username" placeholder="Username">
<div *ngIf="fc['userName'].touched && fc['userName'].invalid" >
<div *ngIf="fc['userName'].errors && fc['userName'].errors['required']">Username is required!</div>
<div *ngIf="fc['userName'].errors && fc['userName'].errors['minlength']">Username cannot be less than 5 characters!</div>
<div *ngIf="fc['userName'].errors && fc['userName'].errors['maxlength']">Username cannot be more than 50 characters!</div>
<div *ngIf="fc['userName'].errors && fc['userName'].errors['cannotContainSpace']">Space not allowed in Username!</div>
</div>
</div>
</div>
<div >
<div >
<label for="merchantName">Merchant Name<span style="color:red;">*</span></label>
<input type="text" formControlName='merchantName' id="merchantName" placeholder="Merchant Name">
<div *ngIf="fc['merchantName'].touched && fc['merchantName'].invalid" >
<div *ngIf="fc['merchantName'].errors && fc['merchantName'].errors['required']">Merchant Name is required!</div>
<div *ngIf="fc['merchantName'].errors && fc['merchantName'].errors['minlength']">Merchant Name cannot be less than 3 characters!</div>
<div *ngIf="fc['merchantName'].errors && fc['merchantName'].errors['maxlength']">Merchant Name cannot be more than 100 characters!</div>
</div>
</div>
</div>
<div >
<div >
<label for="email">Email<span style="color:red;">*</span></label>
<input type="email" formControlName='email' id="email" placeholder="[email protected]">
<div *ngIf="fc['email'].touched && fc['email'].invalid" >
<div *ngIf="fc['email'].errors && fc['email'].errors['required']">Email is required!</div>
<div *ngIf="fc['email'].errors && fc['email'].errors['pattern']">Enter Appropriate Email Address!</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<label for="email">Email<span style="color:red;">*</span></label>
<input type="email" formControlName='email' id="email" placeholder="[email protected]">
<div *ngIf="fc['email'].touched && fc['email'].invalid" >
<div *ngIf="fc['email'].errors && fc['email'].errors['required']">Email is required!</div>
<div *ngIf="fc['email'].errors && fc['email'].errors['pattern']">Enter Appropriate Email Address!</div>
</div>
</div>
</div>
<div >
<div >
<label for="accountNumber">Account Number<span style="color:red;">*</span></label>
<input type="text" formControlName='accountNumber' id="accountNumber" placeholder="Account Number">
<div *ngIf="fc['accountNumber'].touched && fc['accountNumber'].invalid" >
<div *ngIf="fc['accountNumber'].errors && fc['accountNumber'].errors['required']">Account Number is required!</div>
<div *ngIf="fc['accountNumber'].errors && fc['accountNumber'].errors['minlength']">Account Number cannot be less than 5 characters!</div>
<div *ngIf="fc['accountNumber'].errors && fc['accountNumber'].errors['maxlength']">Account Number cannot be more than 50 characters!</div>
<div *ngIf="fc['accountNumber'].errors && fc['accountNumber'].errors['pattern']">Enter only numbers for Account Number!</div>
</div>
</div>
</div>
</div>
</div>
<div >
<button type="button" id="cancelCreate" data-dismiss="modal" (click)="onClose()">Close</button>
<button type="submit" [disabled]="isLoading" (click)="createValidate()"><span *ngIf="isLoading" ></span>
<i aria-hidden="true"></i> Submit</button>
</div>
</form>
Then I have this third party api:
which appears this way:
{
"AccountNumber": "0987654321",
"CustomerName": "Frank Akwetey"
}
accountNumber is the parameter
What I want to achieve is that when the user enters data into AccountNumber into the textinput field, the application should validate using the third party api, and also display the CustomerName of the corresponding AccountNumber in a label under the accountNumber textinput field.
How do I achieve this?
Thank you
CodePudding user response：
The simplest way to achieve this is to know the length of a valid account number. Let suppose if an account number cannot be greater or less than 11 digits then.
if (this.createMerchantForm.value.accountNumber.length === 11) {
this.http.post(
`https://thirtpartyapi.com/AccountDetail?${this.createMerchantForm.value.accountNumber}`
).subscribe(
(response: any) => {
console.log(response); //account holder details if valid else no account found or error
},
(error: any) => {},
);
}