web-ui: Display field validation status on TransactionFinder

web-ui/src/app/app.component.ts

@@ -24,8 +24,22 @@ export class AppComponent {
 
   englishLang(): Object {
     return {
+      // default messages from angular
+      'required': 'A value is required',
+      'pattern': 'Invalid format',
+      'email': 'Invalid email',
+      'minlength': 'More characters are required',
+      'maxlength': 'Too many characters',
+      'min': 'The value is too small',
+      'max': 'The value is too big',
+
+      // messages
       'message.serverUnavailable': 'The server unavailable, please try again in a minute',
+
+      // actions
       'action.find': 'Find',
+
+      // labels
       'label.transactionId': 'Transaction Id'
     };
   }

web-ui/src/app/components/transaction-finder/transaction-finder.component.html

@@ -1,6 +1,8 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate role="form" class="form-horizontal">
 
-  <div class="form-group">
+  <div [ngClass]="{ 'has-success': errorService.hasCorrectValue(form, 'transactionId'), 'has-error': errorService.hasWrongValue(form,
+  'transactionId') }" class="form-group" >
+
     <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
       <input formControlName="transactionId" type="text" id="transactionId" class="form-control" placeholder="{{ 'label.transactionId' | translate }}">
     </div>
@@ -8,5 +10,8 @@
     <div class="text-left col-sm-offset-2">
       <input type="submit" [disabled]="!form.valid" value="{{ 'action.find' | translate }}" class="btn btn-primary">
     </div>
+    <div [hidden]="!errorService.hasWrongValue(form, 'transactionId')" class="col-xs-4 col-sm-4 col-md-3 col-md-3">
+      <span class="help-block">{{ errorService.getFieldError(form, 'transactionId') | translate }}</span>
+    </div>
   </div>
 </form>

web-ui/src/app/components/transaction-finder/transaction-finder.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 
+import { ErrorService } from '../../services/error.service';
+
 @Component({
   selector: 'app-transaction-finder',
   templateUrl: './transaction-finder.component.html',
@@ -11,7 +13,10 @@ export class TransactionFinderComponent implements OnInit {
 
   form: FormGroup;
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(
+    private formBuilder: FormBuilder,
+    public errorService: ErrorService) {
+
     this.createForm();
   }