The AFD PCE Angular module makes it easy to quickly add TypeAhead and advanced field validation to front end Angular applications.

TypeAhead Address lookup can be done for all countries.

Form control validation is available for the following fields:

• Credit/Debit Cards
• UK Bank Account Number with Sort Code
• Email Address (checks if mailbox is live)
• Worldwide Phone Numbers (checks if number is real)

TypeAhead

The following is a simple example of a TypeAhead control and some result fields.

First, install the module npm install --save @afd-software/pce-angular

Then add the module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AfdPceAngularModule } from '@afd-software/pce-angular';

....

@NgModule({
  declarations: [
    AppComponent,
    ....
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    AfdPceAngularModule,
    ....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Setup the module:

//app.component.ts
import {Component, OnInit} from '@angular/core';
import {AfdPceService} from '@afd-software/pce-angular';

@Component({
.....
})
export class AppComponent implements OnInit {

  constructor(
      public afdPceService: AfdPceService
  ){}

  ngOnInit(){
    this.afdPceService.settings.afdSerial = 'YOUR SERIAL';
    this.afdPceService.settings.afdPassword = 'YOUR PASSWORD';
  }
}

Add the controls to the component:

<!-- app.component.html -->
<div class="form-control">
  <label for="afd-typeahead">TypeAhead</label>
  <afd-typeahead-component id="afd-typeahead"></afd-typeahead-component>
</div>
<div class="form-control">
  <label for="postcode">Postcode</label>
  <input afdResult="Postcode" id="postcode">
</div>
<div class="form-control">
  <label for="property">Property</label>
  <input afdResult="Property" id="property">
</div>
<div class="form-control">
  <label for="street">Street</label>
  <input afdResult="Street" id="street">
</div>
<div class="form-control">
  <label for="town">Town</label>
  <input afdResult="Town" id="town">
</div>

This component now has full TypeAhead functionality.

Validation

The module offers validation for Phone Numbers, Email Addresses, Card Validation, and Account Validation. In addition to checking the validity of the controls, additional information can be extracted from certain fields. For example, with card validation it is possible to extract the card type so that card graphics can be displayed along side the field as the user types.

The following is an example of how to add phone number validation:

<!--app.component.html-->
<div class="form-control">
  <input
    type="tel"
    afdPhoneRegexValid
    afdPhonePceValid
    #phoneControl="ngModel"
    [(ngModel)]="phone"
  >
  <span *ngIf="phoneControl.hasError('required')" class="error">This field is required</span>
  <span *ngIf="phoneControl.hasError('afdPhoneRegexValid')" class="error">{{phoneControl.errors.afdPhoneRegexValid.message}}</span>
  <span *ngIf="phoneControl.hasError('afdPhonePceValid')" class="error">{{phoneControl.errors.afdPhonePceValid.message}}</span>
</div>

Documentation

Full documentation of the extended features of this module can be found here.

Get Started

We offer both a hosted version of PCE and a local installed version. To get started with either of these please request an evaluation, [email protected].