Create a Bank Claim Form Using Angular and SurveyJS

Introduction

Bank claim forms are important for resolving financial disputes and ensuring that both banks and customers are treated fairly. By providing a clear and organized way to report and investigate issues, these forms help to maintain trust and confidence in the banking system.

A typical bank claim form will contain information about the customer, such as their name and account number, as well as details about the issue being reported. This may include the date and amount of the transaction in question, as well as any supporting documents. The form may also include a section for the customer to describe the nature of the issue and any steps they have already taken to resolve it.

In this article, we'll use a free and open-source JavaScript library to build a bank claim form which you can connect easily to your bank website. But before we go into the details, let's look at the technologies that we'll use:

• Angular: An application-design framework and development platform for creating single-page applications.
• SurveyJS: A free and open-source JavaScript form builder (Github link), which makes creating self-hosted forms much simple and easier.

Now, if you're wondering why you should use this library instead of using Angular directly to create your form, I invite you to take a look at this guide. It covers in detail the benefits of this particular library and how it makes your work faster and easier.

In the next section, we will introduce the content for every page of our bank claim form.

Structure of the Bank claim form

Our bank claim form is composed of 6 pages:

Page 1: YOUR REQUEST (Ask a question or make a claim)

• Your request (question, claim)
• Your relation with the bank (I am a client, I am not a client)

Page 2: APPLICANT DETAILS

• Civility (Gender)
• First name
• Last name
• Email address
• Phone number
• Address (If client)
• City (If client)
• Postal code (If client)
• Client type [Personal account, Professional account, Private Bank] (If client)

Page 3: BANK DETAILS (If client)

• Account holder name
• Account number (IBAN)

Page 4: YOUR QUESTION

• Type the question (request information about services, account types, weekly working time)
• Details about the question (details)

Page 5: YOUR CLAIM (you can add multiple invoices)

• Date of Transaction
• Transaction Amount
• Description (Brief Description of the Issue)
• Supporting documentation (file)

Now let's start creating our form.

Page 6: SPECIAL PAGE

If you are not a client and you try to make a claim, a special page is shown for you.

Steps for Creating Bank Claim Form

1. Create an Angular project and Configure SurveyJS

In order to create an Angular project, you should first ensure that you have installed NPM and the latest version of the AngularJS CLI.

• Now, let's create the project and install SurveyJS:

ng new bank-claim-form-app
cd bank-claim-form-app
npm install survey-angular-ui — save

• Then, configure the SurveyJS theme. According to the official documentation, SurveyJS provides two themes: Modern UI and Default V2 UI

For our example, we will use the Default V2 UI theme.

So, add the following link to the angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "bank-claim-form-app": {
      // …
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // …
          },
          "tsConfig": "tsconfig.app.json",
          "assets": [
            // …
          ],
          "styles": [
            "src/styles.css",
            // Default V2 theme
            "node_modules/survey-core/defaultV2.fontless.min.css"
          ],
          "scripts": []
        }
        // …
      },
      "serve": {
        // …
      },
      "test": {
        // …
      }
    }
  }
}

• Next, for the theme, the default will serve us just fine. For that, import the defaultV2 theme from survey-core, and you're done.

So, let's update our app.component.ts file:

import { Component } from "@angular/core";
import "survey-core/defaultV2.fontless.min.css";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "bank-claim-form-app";
}

Next, for the theme, the default will serve us just fine. For that, import the defaultV2 theme from survey-core, and you're done. So, let's update our app.component.ts file:

import { Component } from "@angular/core";
import "survey-core/defaultV2.fontless.min.css";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "bank-claim-form-app";
}

• For defaultV2, I'm using the SurveyJS-provided CSS files that don't have Google Fonts, but you can use the regular one (defaultV2.min.css) if you want.
• Finally, add the SurveyJS module to the app.module.ts file:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { SurveyModule } from "survey-angular-ui";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SurveyModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Create the Job Application Form model

SurveyJS comes with an easy technique to describe the content of the form, by using a JSON-based schema object that describes our form model. This schema contains the different sections and parts of the form.

So, let's create our model schema in a separated file form.schema.ts:

export const schema = {
  title: "Bank claim form",
  description: "Ask a question or make a claim",
  showProgressBar: "top",
  progressBarType: "buttons",
  pages: [
    {
      name: "yourRequest",
      navigationTitle: "Your request",
      navigationDescription: "Tell us what is your request",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "radiogroup",
          name: "requestType",
          title: "What is your request ?",
          colCount: 1,
          choices: ["Ask a question", "Make a claim"],
        },
        {
          type: "radiogroup",
          name: "clientOrNot",
          title: "What is your relation with our bank ?",
          colCount: 1,
          choices: ["I am a client", "I am not a client"],
        },
      ],
    },
    {
      name: "applicantDetails",
      navigationTitle: "Applicant details",
      navigationDescription: "Tell us about you",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "radiogroup",
          name: "civility",
          title: "Civility",
          colCount: 2,
          choices: ["Mrs", "Ms"],
        },
        {
          type: "text",
          name: "firstName",
          title: "First Name",
          startWithNewLine: false,
        },
        {
          type: "text",
          name: "lastName",
          title: "Last Name",
          startWithNewLine: false,
        },
        {
          type: "text",
          name: "phone",
          title: "Telephone number",
        },
        {
          type: "text",
          name: "email",
          title: "Email",
          startWithNewLine: false,
        },
        {
          type: "text",
          name: "address",
          title: "Address",
        },
        {
          type: "text",
          name: "city",
          title: "City",
        },
        {
          type: "text",
          name: "postalCode",
          title: "Postal code",
        },
      ],
    },
    {
      name: "bankDetails",
      navigationTitle: "Bank details",
      navigationDescription: "Give us your account details",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "text",
          name: "accountHolderName",
          title: "Account holder name",
        },
        {
          type: "text",
          name: "iban",
          title: "Account number (IBAN)",
        },
      ],
    },
    {
      name: "yourQuestion",
      navigationTitle: "Ask your question",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "checkbox",
          name: "questionType",
          title: "Your question is about : ",
          choices: [
            "Request information about services",
            "Account types",
            "Weekly working time",
            "Other",
          ],
        },
        {
          type: "comment",
          name: "question",
          title: "Details of your question",
        },
      ],
    },
    {
      name: "yourClaim",
      navigationTitle: "Your claim",
      navigationDescription: "You can add multiple invoices",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "paneldynamic",
          name: "invoices",
          title: "Invoices",
          keyName: "position",
          showQuestionNumbers: "off",
          templateTitle: "Invoice #{panelIndex}",
          minPanelCount: 1,
          panelAddText: "Add another invoice",
          panelRemoveText: "Remove invoice",
          templateElements: [
            {
              type: "text",
              name: "transactionDate",
              title: "Date of Transaction",
            },
            {
              type: "text",
              name: "transactionAmount",
              title: "Transaction Amount",
            },
            {
              type: "comment",
              name: "comment",
              title: "A brief description of the issue",
            },
            {
              type: "file",
              name: "invoiceFile",
              title: "Supporting documentation (file)",
              showPreview: true,
              maxSize: 102400,
            },
          ],
        },
      ],
    },
    {
      name: "alertPage",
      navigationTitle: "You are not a customer",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "html",
          name: "alert",
          html: "Sorry, you are <b>not a customer for our bank</b> you can not make a claim !!",
        },
      ],
    },
  ],
};

Before moving on to the next section, let's explain the content of our form:

• Our form contains 6 pages described in the pages property.
• Each page is described by a name, title and a list of elements.
• Each element has a specific type and is characterized by a name and title.
• To know more about the properties of each part of this model, you can take a look at the API provided by SurveyJS.

3. Add form validation

To add a validation layer to our form, we will use a combination of properties provided by SurveyJS:

• isRequired property to mark a field as required or not.

isRequired : true

• inputType property to define the field value type. it can be : [email, tel, date, number ...]

inputType: number

• validators property to define a rule with regular expressions (regex). For example, to validate the telephone number field and the account number we will use a specific regex.

// Validators for phone number
validators: [{
type: “regex”,
regex: “\\+[0–9]{1} \\([0–9]{3}\\) [0–9]{3}-[0–9]{2}-[0–9]{2}”,
text: “Phone number must be in the following format: +0 (000) 000–00–00”
}]
// Validators for bank account number
validators: [{
type: “regex”,
text: “Please enter a valid bank account number”,
regex: “^[0–9]{9,18}$”
}]

• visibleIf property to display or hide some elements, such as the address field if it's not a client.

visibleIf: '{clientOrNot}="I am a client"',

4. Add page branching logic

In this section, you focus on how to display or hide pages according to a specific field value. Our form should follow this logic:

Bank claim form workflow

To achieve this, use the visibleIf property on the concerned pages.

In the end, our form schema will look like this:

export const schema = {
  title: "Bank claim form",
  description: "Ask a question or make a claim",
  showProgressBar: "top",
  progressBarType: "buttons",
  pages: [
    {
      name: "yourRequest",
      navigationTitle: "Your request",
      navigationDescription: "Tell us what is your request",
      showQuestionNumbers: "off",
      elements: [
        {
          type: "radiogroup",
          name: "requestType",
          title: "What is your request ?",
          colCount: 1,
          choices: ["Ask a question", "Make a claim"],
          isRequired: true,
        },
        {
          type: "radiogroup",
          name: "clientOrNot",
          title: "What is your relation with our bank ?",
          colCount: 1,
          choices: ["I am a client", "I am not a client"],
          isRequired: true,
        },
      ],
    },
    {
      name: "applicantDetails",
      navigationTitle: "Applicant details",
      navigationDescription: "Tell us about you",
      showQuestionNumbers: "off",
      visibleIf:
        "{requestType}=”Ask a question” || ({requestType}=”Make a claim” && {clientOrNot}=”I am a client”)",
      elements: [
        {
          type: "radiogroup",
          name: "civility",
          title: "Civility",
          choices: ["Mrs", "Ms"],
          colCount: 2,
          isRequired: true,
        },
        {
          type: "text",
          name: "firstName",
          title: "First Name",
          startWithNewLine: false,
          isRequired: true,
        },
        {
          type: "text",
          name: "lastName",
          title: "Last Name",
          startWithNewLine: false,
          isRequired: true,
        },
        {
          type: "text",
          name: "phone",
          title: "Telephone number",
          inputType: "tel",
          isRequired: true,
          validators: [
            {
              type: "regex",
              regex: "\\+[0–9]{1} \\([0–9]{3}\\) [0–9]{3}-[0–9]{2}-[0–9]{2}",
              text: "Phone number must be in the following format: +0 (000) 000–00–00",
            },
          ],
        },
        {
          type: "text",
          name: "email",
          title: "Email",
          inputType: "email",
          startWithNewLine: false,
          isRequired: true,
        },
        {
          type: "text",
          name: "address",
          title: "Address",
          visibleIf: "{clientOrNot}=”I am a client”",
          isRequired: true,
        },
        {
          type: "text",
          name: "city",
          title: "City",
          visibleIf: "{clientOrNot}=”I am a client”",
          isRequired: true,
        },
        {
          type: "text",
          name: "postalCode",
          title: "Postal code",
          inputType: "number",
          visibleIf: "{clientOrNot}=”I am a client”",
          isRequired: true,
        },
      ],
    },
    {
      name: "bankDetails",
      navigationTitle: "Bank details",
      navigationDescription: "Give us your account details",
      showQuestionNumbers: "off",
      visibleIf: "{clientOrNot}=”I am a client”",
      elements: [
        {
          type: "text",
          name: "accountHolderName",
          title: "Account holder name",
          isRequired: true,
        },
        {
          type: "text",
          name: "iban",
          title: "Account number (IBAN)",
          isRequired: true,
          validators: [
            {
              type: "regex",
              text: "Please enter a valid bank account number",
              regex: "^[0–9]{9,18}$",
            },
          ],
        },
      ],
    },
    {
      name: "yourQuestion",
      navigationTitle: "Ask your question",
      showQuestionNumbers: "off",
      visibleIf: "{requestType}=”Ask a question”",
      elements: [
        {
          type: "checkbox",
          name: "questionType",
          title: "Your question is about : ",
          choices: [
            "Request information about services",
            "Account types",
            "Weekly working time",
            "Other",
          ],
          isRequired: true,
        },
        {
          type: "comment",
          name: "question",
          title: "Details of your question",
          isRequired: true,
        },
      ],
    },
    {
      name: "yourClaim",
      navigationTitle: "Your claim",
      navigationDescription: "You can add multiple invoices",
      showQuestionNumbers: "off",
      visibleIf:
        "{requestType}=”Make a claim” && {clientOrNot}=”I am a client”",
      elements: [
        {
          type: "paneldynamic",
          name: "invoices",
          title: "Invoices",
          keyName: "position",
          showQuestionNumbers: "off",
          templateTitle: "Invoice #{panelIndex}",
          minPanelCount: 1,
          panelAddText: "Add another invoice",
          panelRemoveText: "Remove invoice",
          templateElements: [
            {
              type: "text",
              name: "transactionDate",
              title: "Date of Transaction",
              inputType: "date",
              isRequired: true,
            },
            {
              type: "text",
              name: "transactionAmount",
              title: "Transaction Amount",
              inputType: "number",
              isRequired: true,
            },
            {
              type: "comment",
              name: "comment",
              title: "A brief description of the issue",
              isRequired: true,
            },
            {
              type: "file",
              name: "invoiceFile",
              title: "Supporting documentation (file)",
              showPreview: true,
              maxSize: 102400,
            },
          ],
        },
      ],
    },
    {
      name: "alertPage",
      navigationTitle: "You are not a customer",
      showQuestionNumbers: "off",
      visibleIf:
        "{requestType}=”Make a claim” && {clientOrNot}=”I am not a client”",
      elements: [
        {
          type: "html",
          name: "alert",
          html: "Sorry, you are <b>not a customer for our bank</b> you can not make a claim !!",
        },
      ],
    },
  ],
};

5. Test and serve the application

First, make a few modifications to these two files:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Model } from 'survey-core';
import 'survey-core/survey.i18n';
import 'survey-core/defaultV2.fontless.min.css';
import { schema } from './form.schema';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    title = 'bank-claim-form-app';
    bankClaimForm!: Model;
    ngOnInit(): void {
        const form = new Model(schema);
        this.bankClaimForm = form;
    }
}

// app.component.html

<div>
    <survey [model]=”bankClaimForm”></survey>
</div>

// Then, we can compile and serve our application. And finally, open the browser to see the results:
// npm run start

6. Output

Page 1: Your request

Page 2: Applicant details

Page 3: Bank details

Page 4: Ask your question

Page 5: Your claim

Page 6: Alert page

Conclusion

In conclusion, creating a bank claim form using Angular and SurveyJS can be a simple and efficient process. Angular provides a powerful framework for building web applications, while SurveyJS offers a wide range of features for creating surveys and forms. By utilizing these two tools together, developers can create a robust and user-friendly bank claim form that is easy to use and navigate.

The complete code for this project can be found here:

GitHub - EmployeeSatisfactionSurvey/bank-claim-form-app

Additionally, to learn about paid plans beyond the free and open-source library, you can check the pricing section.