feat: Add the ability to disable validationservice on angular

Author: Pennati, Lucas

docs/changelog.md

@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 
+- Added the ability to disable the `ValidationService` on Angular. See
+  [docs](./guide/angular.md#customisingdisabling-validationservice) for more details.
+
 ### Fixed
 
 ### Removed

docs/guide/angular.md

@@ -89,10 +89,12 @@ applied.
 
 So instead of doing:
 
-```
+```angular2html
 // my-component.component.html
 <six-input [formControl]="formControl" [required]="true"></six-input>
+```
 
+```ts
 // my-component.component.ts
 @Component({
   ...
@@ -105,19 +107,21 @@ export class MyComponent {
 
 when initialising the library pass the `showAsteriskOnRequiredValidator` property like so:
 
-```
-UiLibraryAngularModule.forRoot({
+```ts
+UiLibraryAngularModule.forRoot(/* ... other options*/,{
   showAsteriskOnRequiredValidator: true
 })
 ```
 
 Now your component will apply the required flag automatically, without requiring you to set it
 manually:
 
-```
+```angular2html
 // my-component.component.html
 <six-input [formControl]="formControl"></six-input> // <-- [required] prop can be omitted
+```
 
+```ts
 // my-component.component.ts
 @Component({
   ...
@@ -128,6 +132,26 @@ export class MyComponent {
 }
 ```
 
+### Customising/Disabling `ValidationService`
+
+The Angular library ships with a built-in `ValidationService` that can be used to validate
+`FormControl`s.
+
+To override it, create your own implementation that extends `ValidationMessagesService`. You can
+then override the `getErrorMessage(language: Language, error: ValidationError)` method to return
+custom error messages.
+
+To completely disable the `ValidationService`, pass the `disableValidation` option to the
+`forRoot()` method:
+
+```ts
+UiLibraryAngularModule.forRoot(/* ... other options*/, {
+  disableValidationService: true
+})
+```
+
+WARNING: This will disable any sort of validation service. Even if you pass your .
+
 ## Using the Components
 
 The components can be utilized just like any other Angular component. However, there's one caveat:

libraries/ui-library-angular/src/lib/control-value-accessors/value-accessor.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, inject, Injector, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, inject, Injector, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { getLanguage, ValidationError } from '@six-group/ui-library';
@@ -69,12 +69,13 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
       const control = this.ngControl?.control;
 
       const invalid = control.status === 'INVALID' && control.dirty && control.touched;
-      let errorTexts;
-      if (invalid) {
-        errorTexts = this.initialErrorText || this.getErrorTexts(control);
-      }
       element.invalid = invalid;
-      element.errorText = errorTexts ?? '';
+
+      // If the module is configured to do so, display error messages for invalid controls
+      if (!this.config.disableValidationService && invalid) {
+        const errorTexts = this.initialErrorText || this.getErrorTexts(control);
+        element.errorText = errorTexts ?? '';
+      }
 
       // When the module is configured to do so, display an asterisk next to any form control that has a required validator
       if (this.config.showAsteriskOnRequiredValidator && this.ngControl.control.hasValidator(Validators.required)) {

libraries/ui-library-angular/src/lib/ui-library-angular-config.ts

@@ -1,11 +1,13 @@
 import { InjectionToken } from '@angular/core';
 
 export interface UiLibraryConfig {
-  showAsteriskOnRequiredValidator: boolean;
+  showAsteriskOnRequiredValidator?: boolean;
+  disableValidationService?: boolean;
 }
 
 export const DEFAULT_UI_LIBRARY_CONFIG: UiLibraryConfig = {
   showAsteriskOnRequiredValidator: false,
+  disableValidationService: false,
 };
 
 export const UI_LIBRARY_CONFIG = new InjectionToken<UiLibraryConfig>('UiLibraryConfig');