0

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="[email protected]">
          <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="[email protected]">
          <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

Improve this question

1 Answer 1

Reset to default
0

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) => {},
  );
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks @MuhammadUmar. But I want it to be validated before the form is submitted and be displayed on on a label. Secondly, where do I add the if statement you posted?
you can create a function and bind that with accountNumber <input> tag like this <input (input)="onAccountNumberTyped()" />, then inside this function paste the above code.
Hello @MuhammadUmar, The url service is secured with these headers: "secId": "knt10", "secName": "kkcm", "secPassword": "nnkml" How do I add to the code above
Post a different question for this with relevant information

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.