internal/complex-input-type-validation

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-complex.model.ts

@@ -5,7 +5,10 @@ import { DsDynamicInputModel } from './ds-dynamic-input.model';
 import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
 import { DynamicConcatModel, DynamicConcatModelConfig } from './ds-dynamic-concat.model';
 import { AUTOCOMPLETE_COMPLEX_PREFIX } from './autocomplete/ds-dynamic-autocomplete.model';
-import { DEFAULT_EU_FUNDING_TYPES } from './sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.model';
+import {
+  DEFAULT_EU_FUNDING_TYPES,
+  DEFAULT_MAX_CHARS_TO_AUTOCOMPLETE
+} from './sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.model';
 
 export const COMPLEX_GROUP_SUFFIX = '_COMPLEX_GROUP';
 export const COMPLEX_INPUT_SUFFIX = '_COMPLEX_INPUT_';
@@ -101,6 +104,11 @@ export class DynamicComplexModel extends DynamicConcatModel {
     let isEUFund = false;
     values.forEach((val, index) =>  {
       if (val.value) {
+        // do not set value if it bigger than allowed length
+        if (this.validateInputLength(val.value)) {
+          return;
+        }
+
         (this.get(index) as DsDynamicInputModel).value = val;
         // for `local.sponsor` input field
         if (this.name === SPONSOR_METADATA_NAME) {
@@ -120,4 +128,8 @@ export class DynamicComplexModel extends DynamicConcatModel {
       }
     });
   }
+
+  private validateInputLength(value) {
+    return value.length > DEFAULT_MAX_CHARS_TO_AUTOCOMPLETE;
+  }
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.component.ts

@@ -91,7 +91,7 @@ export class DsDynamicSponsorAutocompleteComponent extends DsDynamicAutocomplete
       tap(() => this.changeSearchingStatus(true)),
       switchMap((term) => {
         // min 3 characters
-        if (term === '' || term.length < this.model.minChars) {
+        if (term === '' || term.length < this.model.minChars || term.length > this.model.maxLength) {
           return observableOf({ list: [] });
         } else {
         let response: Observable<PaginatedList<ExternalSourceEntry | MetadataValue>>;

src/app/shared/form/builder/ds-dynamic-form-ui/models/sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.model.ts

@@ -5,6 +5,7 @@ import { isEmpty } from '../../../../../empty.util';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_AUTOCOMPLETE = 'AUTOCOMPLETE';
 export const DEFAULT_MIN_CHARS_TO_AUTOCOMPLETE = 3;
+export const DEFAULT_MAX_CHARS_TO_AUTOCOMPLETE = 200;
 
 export const DEFAULT_EU_DISPLAY_VALUE = 'EU';
 export const DEFAULT_EU_STORAGE_VALUE = 'euFunds';
@@ -24,6 +25,7 @@ export interface DsDynamicSponsorAutocompleteModelConfig extends DsDynamicInputM
 export class DsDynamicSponsorAutocompleteModel extends DsDynamicInputModel {
 
   @serializable() minChars: number;
+  @serializable() maxLength: number;
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_AUTOCOMPLETE;
 
   constructor(config: DsDynamicSponsorAutocompleteModelConfig, layout?: DynamicFormControlLayout) {
@@ -36,6 +38,7 @@ export class DsDynamicSponsorAutocompleteModel extends DsDynamicInputModel {
     this.autoComplete = AUTOCOMPLETE_OFF;
     // if minChars is not defined in the configuration -> load default value
     this.minChars = config.minChars || DEFAULT_MIN_CHARS_TO_AUTOCOMPLETE;
+    this.maxLength = config.maxLength || DEFAULT_MAX_CHARS_TO_AUTOCOMPLETE;
     // if value is not defined in the configuration -> value is empty
     this.value = config.value || [];
   }

src/app/shared/form/builder/parsers/complex-field-parser.ts

@@ -17,7 +17,7 @@ import {
   SPONSOR_METADATA_NAME,
 
 } from '../ds-dynamic-form-ui/models/ds-dynamic-complex.model';
-import { hasValue, isNotEmpty } from '../../../empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../../../empty.util';
 import { ParserOptions } from './parser-options';
 import {
   CONFIG_DATA,
@@ -128,6 +128,9 @@ export class ComplexFieldParser extends FieldParser {
         inputConfig.required = hasValue(complexDefinitionInput.required) && complexDefinitionInput.required === 'true';
       }
 
+      // max length - 200 chars
+      this.addValidatorToComplexInput(inputConfig, complexDefinitionInput);
+
       let inputModel: DsDynamicInputModel;
       switch (complexDefinitionInput['input-type']) {
         case ParserType.Onebox:
@@ -165,4 +168,21 @@ export class ComplexFieldParser extends FieldParser {
 
     return complexModel;
   }
+
+  addValidatorToComplexInput(inputConfig, complexDefinitionInput) {
+    let regex;
+    if (isUndefined(complexDefinitionInput.regex)) {
+      // default max length 200 chars
+      regex = new RegExp('^.{1,200}$');
+    } else {
+      // take regex from definition e.g., email
+      regex = new RegExp(complexDefinitionInput.regex);
+    }
+
+    inputConfig.validators = Object.assign({}, inputConfig.validators, { pattern: regex });
+    inputConfig.errorMessages = Object.assign(
+      {},
+      inputConfig.errorMessages,
+      { pattern: 'error.validation.pattern' });
+  }
 }