Custom validator implemented using remote module

Level: intermediate

Creatio lets you implement the business logic of the Freedom UI page using validators. Validators are functions that check whether the value of the ViewModel attribute is correct. For example, they can check the value of a record field for compliance with specified conditions.

You can implement a custom validator in the following ways:

• Use the validators section of the Freedom UI page schema. Supported in Creatio 8.0 Atlas and later. View example that implements validator in a separate article: Implement the field value validation on a page.
• Use a remote module.

To implement a custom validator using remote module:

1. Create an Angular project to develop a custom validator using remote module.
2. Create a custom validator using remote module.
3. Add the validator implemented using remote module to the Freedom UI page.

1. Create an Angular project to develop a custom validator using remote module

Develop a custom validator in a dedicated npm package using an external IDE. This example covers the custom validator development in Microsoft Visual Studio Code.

You can create an Angular project to develop a custom validator in multiple ways, similarly to creating an Angular project to develop a custom UI component using remote module. To do this, follow the instruction in a separate article: Custom UI component implemented using remote module.

2. Create a custom validator using remote module

1. Create an Angular class in the project. To do this, run the ng g class some-validator-name.validator command at the command line terminal of Microsoft Visual Studio Code.

   As a result, Microsoft Visual Studio Code will add the SomeValidatorNameValidator class files to the src/app/ project directory.

2. Implement the validator.

   1. Open the some-validator-name.validator.ts file.
   2. Flag the SomeValidatorNameValidator class using the @CrtValidator decorator.
   3. Inherit the BaseValidator class from the @creatio-devkit/common library.
   4. Implement the field async.
   5. Implement the abstract method validate() that validates data in the field.
   6. Import the required functionality from the libraries into the class.
   7. Save the file.
   some-validator-name.validator.ts file

   /* Import the required functionality from the libraries. */
   import { BaseValidator, CrtControlState, CrtInject, CrtValidationErrors, CrtValidator, ValidatorParametersValues } from "@creatio-devkit/common";
   
   @CrtValidator({
       type: 'usr.SomeValidatorNameValidator',
   })
   
   export class SomeValidatorNameValidator extends BaseValidator {
       constructor(private _name: string) {
           super();
       }
       /* Implement a field async. */
       protected override async = false;
       /* Implement the "validate" abstract method. */
       public validate(
           control: CrtControlState,
           params?: ValidatorParametersValues
       ): CrtValidationErrors | null {
   
           /* Implement the logic of the method. */
           
           const value = control.value as string;
   
           if (value === this._name) {
               return {
                   error: { 
                       message: 'Validation error message' 
                   }, 
               }
           }
           return null;
       }
   }

3. Inject dependencies.

   1. Open the some-validator-name.validator.ts file.
   2. Create the SOME_TOKEN_NAME instance of the InjectionToken class. Use the token to work with Angular DI (dependency injection). 
   3. Mark DI in the constructor of the SomeValidatorNameValidator class using the @CrtInject decorator. 
   4. Import the required functionality from the libraries into the class.
   5. Save the file.
   some-validator-name.validator.ts file

   /* Import the required functionality from the libraries. */
   ...
   import { InjectionToken } from "@angular/core";
   
   /* The SOME_TOKEN_NAME token that works with Angular DI (dependency injection). */
   export const SOME_TOKEN_NAME = new InjectionToken<string>('SOME_TOKEN_NAME');
   
   ...
   
   export class SomeValidatorNameValidator extends BaseValidator {
       /* Mark DI in the constructor using the @CrtInject decorator. */
       constructor(@CrtInject(SOME_TOKEN_NAME) private _name: string) {
           super();
       }
       
   ...
   
   }

4. Register the SomeValidatorNameValidator validator as a validator and the SOME_TOKEN_NAME token. 

   1. Open the app.module.ts file.

   2. Add the SomeValidatorNameValidator validator to the validators section in the CrtModule decorator.

   3. Add the configuration object to the providers section in the NgModule decorator.

      • Set the provide property to SOME_TOKEN_NAME.
      • Set the useValue property to the validation value.

   4. Implement the resolveDependency() method in the bootstrapCrtModule() method of the AppModule root module. The bootstrapCrtModule() method registers the SomeValidatorNameValidator validator flagged using the CrtModule decorator. The resolveDependency() method receives the dependencies of the SomeValidatorNameValidator converter.

   5. Import the required functionality from the libraries into the class.

   6. Save the file.

   app.module.ts file

   /* Import the required functionality from the libraries. */
   import { DoBootstrap, Injector, NgModule, ProviderToken } from '@angular/core'; 
   import { BrowserModule } from '@angular/platform-browser';
   import { bootstrapCrtModule, CrtModule } from '@creatio-devkit/common';
   import { SomeValidatorNameValidator, SOME_TOKEN_NAME} from "./some-validator-name.validator";
   
   @CrtModule({
     validators: [SomeValidatorNameValidator],
   })
   @NgModule({
     declarations: [],
     imports: [BrowserModule],
     providers: [{
       provide: SOME_TOKEN_NAME,
       useValue: 'SomeValue'
     }],
   
   })
   export class AppModule implements DoBootstrap {
     constructor(private _injector: Injector) { }
   
     ngDoBootstrap(): void {
       /* Bootstrap CrtModule definitions. */
       bootstrapCrtModule('some_package_name', AppModule, {
         resolveDependency: (token) => this._injector.get(<ProviderToken<unknown>>token)
       });
     }
   }

5. Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the <%projectName%> name specified on step 1.

3. Add the validator implemented using remote module to the Freedom UI page

1. Repeat steps 1-6 of the procedure to implement a custom UI component using remote module.

2. Bind the usr.SomeValidatorNameValidator validator to the model attribute in the viewModelConfigDiff schema section.

   viewModelConfigDiff schema section

   viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
       "attributes": {
           "SomeField": {
               "modelConfigDiff": {
                   "path": "PDS.SomeField"
               },
               "validators": {
                   "usr.SomeValidatorNameValidator": {
                       "type": "usr.SomeValidatorNameValidator",
                       "params": {}
                   }
               }
           },
           ...
       }
   }/**SCHEMA_VIEW_MODEL_CONFIG*/,

3. Click Save on the client Module Designer’s toolbar.

As a result, Creatio will apply the validator to the element on the Freedom UI page.

---

See also

Custom UI component implemented using remote module

---

Resources

Page customization examples