Angular - How to validate text input data using third party api

Issue

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 class="form-horizontal" id="add-form" [formGroup]="createMerchantForm" (ngSubmit)="onMerchantSubmitForm()">
  <div class="modal-body">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="userName">User Name<span style="color:red;">*</span></label>
          <input type="text" class="form-control" formControlName='userName' id="username" placeholder="Username">
          <div *ngIf="fc['userName'].touched && fc['userName'].invalid" class="alert alert-danger">
            <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 class="col-md-6">
        <div class="form-group">
          <label for="merchantName">Merchant Name<span style="color:red;">*</span></label>
          <input type="text" class="form-control" formControlName='merchantName' id="merchantName" placeholder="Merchant Name">
          <div *ngIf="fc['merchantName'].touched && fc['merchantName'].invalid" class="alert alert-danger">
            <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 class="col-md-6">
        <div class="form-group">
          <label for="email">Email<span style="color:red;">*</span></label>
          <input type="email" class="form-control" formControlName='email' id="email" placeholder="example@email.com">
          <div *ngIf="fc['email'].touched && fc['email'].invalid" class="alert alert-danger">
            <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 class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="email">Email<span style="color:red;">*</span></label>
          <input type="email" class="form-control" formControlName='email' id="email" placeholder="example@email.com">
          <div *ngIf="fc['email'].touched && fc['email'].invalid" class="alert alert-danger">
            <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 class="col-md-6">
        <div class="form-group">
          <label for="accountNumber">Account Number<span style="color:red;">*</span></label>
          <input type="text" class="form-control" formControlName='accountNumber' id="accountNumber" placeholder="Account Number">
          <div *ngIf="fc['accountNumber'].touched && fc['accountNumber'].invalid" class="alert alert-danger">
            <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 class="modal-footer">
    <button type="button" id="cancelCreate" class="btn btn-secondary" data-dismiss="modal" (click)="onClose()">Close</button>
    <button type="submit" class="btn btn-success" [disabled]="isLoading" (click)="createValidate()"><span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
      <i class="fa fa-save" aria-hidden="true"></i> Submit</button>
  </div>
</form>

Then I have this third party api:

https://thirtpartyapi.com/AccountDetail?accountNumber

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

Solution

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) => {},
  );
}

Answered By - Muhammad Umar