ts.validator.fluent - TypeScript Based Generic, Fluent Validation Framework

Summary of above code snippets

• The models are Employee, Credit Card, Super.
• The Employee model has CreditCard and Super as the child models.
• First, an object of the Employee model is created and the data for the properties populated.
• The rules for Super and Employee validation are laid in the validateSuperRules, validateCreditCardRules and validateEmployeeRules functions, using the IValidator<T> interface the framework provides.
• The Super rules are chained and used in Employee validation.
• The rules are the same for both Sync and Async.
• For Sync and Async validation, the Validate and ValidateAsync methods on the framework class Validator are used.
• The Employee object is passed to this class and goes through the validation rules laid.
• Each validation rule comprises of a property on which the validation will apply, a message for any error and an identifier string for the error.
• The identifier string is used to group messages together for a field.
• The framework provides an API called IdentifierStartsWith which fetches all the validation errors for a particular identifier that starts with the text.
• Eg. “Super. Code” will fetch all errors whose identifier starts with Super. Code.

Inheritance support

Validation rules

Populate models

Synchronous validation

• the form-related validation methods are in the base class.
• the Validation Service is injected into the base class.
• wrappers like below allow the derived components to leverage these methods.
  
  1. async validateFormAsync(service: (validationService: ValidationService) => Promise < ValidationResult > ): Promise < boolean > {
  2. this.validationResult = await service(this.validationService);this.validationResult.IsValid ? alert("Congrats! Validation passed.") : this.showValidationTooltips();
  3. return this.validationResult.IsValid;
  4. }

• Html markup of an input element.
• Using Tooltip to display the errors.
  
  1. < div class = "form-group" > < label class = "col-md-4" > Id < /label><ng-template#tipContent><ul class="tooltip-inner"><li*ngFor="let error of validationResult?.IdentifierStartsWith('Id')">{{error.Message}}</li > < /ul></ng - template > < input
  2. type = "text"
  3. id = "Id"
  4. class = "form-control"
  5. name = "Id" [(ngModel)] = "loginUser.Id"
  6. (ngModelChange) = "!validateMe('Id') ? t.open() : t.close()" [ngbTooltip] = "tipContent"#
  7. t = "ngbTooltip"
  8. placeholder = "Id" / > < /div>

Summary of above code snippets

• There is a Validation Service in the Angular 6 CLI app.
• All business rules around model validation are centralized in this service.
• There are 2 models for the components Login and Register. These models are User and register user.
• The framework interface IValidator<T> interface is used to lay the validation rules for these models.
• The Validation Service creates 2 sync and 2 async methods to validate these models.
• The sync methods are validated user and validateRegisterUser. The async ones are validateUserAsync and validateRegisterUserAsync.
• In the sync methods, the framework method Validate is used.
• In the async methods, the framework method ValidateAsync is used.
• This service is injected into the components.
• The methods of the service are used for model validation.
• The IdentifierStartsWith API the framework provides is used to display the validation errors.
• The validation errors are shown in angular bootstrap Tooltips. But, you can show your errors anyhow you like.

• you can learn to build generic frameworks in TypeScript.
• you can learn how to build Angular 6 CLI apps and use the framework.