@double-agent-validator/core

This package serves as complement to the java library called doubleagentvalidator.
This is a javascript library which allow to reuse the same json schemas used in the backend rest application to validates the data at the frontend.
This libs depends on:

• Double Agent Validator dependencies:

ajv() lodash() vanilla-masker() angular12...()

How to test

npm run test

or, if using yarn

yarn test

How to build

npm run build

or, if using yarn

yarn build

How to use --------

1. Install the package in your application:

npm install @double-agent-validator/core

2 Angular Setup

2.1 DoubleAgentAppModule

Create an AppDoubleAgentValidatorModule with a factory to get the validation script from the remote url and fill-in the DoubleAgentValidator service with the schemas, keywords and formats.

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { DoubleAgentValidatorV2Module, DoubleAgentValidator } from '@double-agent-validator/core';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ReactiveFormsModule,
    DoubleAgentValidatorV2Module.forRoot({
      ajv: (self as any)['ajv'],
      validationFn: (self as any)['validate']
    }),
  ],
  exports: [DoubleAgentValidatorV2Module],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [DoubleAgentValidator],
      multi: true
    }
  ]
})
export class DoubleAgentAppModule {
  constructor() {
  }
}

// This Factory would be used at application initialization process
// to load from local ou through http
export function appInitializerFactory(doubleAgentValidator: any) {
  // initializaciton factory which will be called by Angular
  return function () {
    const promiseDoubleAgent = new Promise((resolve, reject) => {
      const scriptAjvLoad = document.createElement('script');
      // get the url from the environment object
      scriptAjvLoad.src = environment.jsonSchemasLocalService;
      scriptAjvLoad.onload = () => {
        // after the load (onload) it will be ready to initialize the application
        doubleAgentValidator.config['ajv'] = (window as any)['ajv'];
        doubleAgentValidator.config['validationFn'] = (window as any)['validate'];
        // resolves the promise, so the Angular application will bootstrap
        resolve(null);
      };
      scriptAjvLoad.onerror = (error: any) => {
        const errorMsg = 'Failed to load doubleAgentValidator' + error.message;
        console.error(errorMsg);
        // fails the Angular initialization
        reject(errorMsg);
      };
      // adds the script element to the document body
      // and so, the schema bundle will be parsed by the browser
      document.body.appendChild(scriptAjvLoad);
    });

    return Promise.all([promiseDoubleAgent]);
  };
}

2.2 Import the DoubleAgentAppModule in your AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { DoubleAgentAppModule } from './double-agent-appp-module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, DoubleAgentAppModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

``` 

#### Great!!! You just did it, now the following services are available on your Angular > 12 App:

##### DoubleAgentValidatorService

This class allow you to validate some data in a service layer using its `validate` method, which checks some data
againts an specific schema you pass to the service.


Your service will be something like the example bellow:

```typescript

import { DoubleAgentValidator } from 'double-agent-validator';
import { ValidationResult } from 'double-agent-validator/models';

@Injectable()
class MyService {
  constructor(private doubleAgentValidator: DoubleAgentValidator) {

  }


  validateContribuinte(): ValidationResult {
    /***
    // returns something like this
    {
      hasErrors: true;
      errors: [
        keyword: 'required',
        dataPath: '.id',
        message: 'field is missing'
      ];
    }
    */
    return this.doubleAgentValidator.validate('contribuinte-v1', data);
  }
}

DoubleAgentFormGroupBuilder

This class can be used to build FormGroup containing the controls representing each property in the schema including the respective validators.
Example:

import { DoubleAgentFormGroupBuilder } from 'double-agent-validator';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'my-form',
  template: `
  <form [formGroup]="formGroup">
    <div class="form-group">
      <label for="nome">Nome: </label>
      <input type="text" id="nome" formControlName="nome"> 
    </div>
    <!-- your another controls for the others properties goes here too -->
  </form>`
})
export class MyFormComponent {
    private shemaName = 'contribuinte-v1';
    private formGroup: FormGroup;
    constructor(private doubleAgentFormGroupBuilder: DoubleAgentFormGroupBuilder) {
      this.formGroup = doubleAgentFormGroupBuilder.build(this.schemaName);
    }
}

If you want create formGroup without validators because your application will handle the validation process itself, you can do this:

import { DoubleAgentFormGroupBuilder } from 'double-agent-validator';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'my-form',
  template: `
  <form [formGroup]="formGroup">
    <div class="form-group">
      <label for="nome">Nome: </label>
      <input type="text" id="nome" formControlName="nome"> 
    </div>
    <!-- your another controls for the others properties goes here too -->
  </form>`
})
export class MyFormComponent {
    private shemaName = 'contribuinte-v1';
    private formGroup: FormGroup;
    constructor(private doubleAgentFormGroupBuilder: DoubleAgentFormGroupBuilder) {
      this.formGroup = doubleAgentFormGroupBuilder.build(this.schemaName, {
        createValidators: false
      });
    }
}

TODO

• Provide the service to allow error messages mapping

• Website to share the library api documentation