Angular Module

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

Address Lookup

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 alongside 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>

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.

 

 

Documentation