Enforce non-repeatable fields in submission forms

src/app/init.service.ts

@@ -13,7 +13,10 @@ import {
   TransferState,
   Type,
 } from '@angular/core';
-import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
+import {
+  DYNAMIC_FORM_CONTROL_MAP_FN,
+  DYNAMIC_VALIDATORS,
+} from '@ng-dynamic-forms/core';
 import {
   select,
   Store,
@@ -41,6 +44,7 @@ import { LocaleService } from './core/locale/locale.service';
 import { HeadTagService } from './core/metadata/head-tag.service';
 import { CorrelationIdService } from './correlation-id/correlation-id.service';
 import { dsDynamicFormControlMapFn } from './shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-map-fn';
+import { CUSTOM_VALIDATORS } from './shared/form/builder/parsers/field-parser';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuProviderService } from './shared/menu/menu-provider.service';
 import { ThemeService } from './shared/theme-support/theme.service';
@@ -120,6 +124,10 @@ export abstract class InitService {
         provide: DYNAMIC_FORM_CONTROL_MAP_FN,
         useValue: dsDynamicFormControlMapFn,
       },
+      {
+        provide: DYNAMIC_VALIDATORS,
+        useValue: CUSTOM_VALIDATORS,
+      },
     ];
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts

@@ -186,7 +186,6 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    */
   openDropdown(sdRef: NgbDropdown) {
     if (!this.model.readOnly) {
-      this.group.markAsUntouched();
       this.inputText = null;
       this.updatePageInfo(this.model.maxOptions, 1);
       this.loadOptions(false);
@@ -339,4 +338,9 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
     this.currentValue = result;
   }
 
+  onBlur(event: Event) {
+    super.onBlur(event);
+    this.group.markAsTouched();
+  }
+
 }

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

@@ -2,6 +2,10 @@
   Inject,
   InjectionToken,
 } from '@angular/core';
+import {
+  AbstractControl,
+  ValidatorFn,
+} from '@angular/forms';
 import {
   DynamicFormControlLayout,
   DynamicFormControlRelation,
@@ -48,6 +52,28 @@
  */
 export const REGEX_FIELD_VALIDATOR = new RegExp('(\\/?)(.+)\\1([gimsuy]*)', 'i');
 
+/**
+ * Define custom form validators here
+ *
+ * Register them by adding their key to a model's validator property, e.g:
+ * ```ts
+ * model.validators = Object.assign({}, model.validators, { notRepeatable: null });
+ * ```
+ */
+export const CUSTOM_VALIDATORS = new Map<string, ValidatorFn>([
+  ['notRepeatable', notRepeatableValidator],
+]);
+
+export function notRepeatableValidator(control: AbstractControl) {
+  const value = control.value;
+  if (!Array.isArray(value) || value.length < 2) {
+    return null;
+  }
+  return {
+    notRepeatable: true,
+  };
+}
+
 export abstract class FieldParser {
 
   protected fieldId: string;
@@ -131,7 +157,11 @@
         },
       };
 
-      return new DynamicRowArrayModel(config, layout);
+      const model = new DynamicRowArrayModel(config, layout);
+      if (config.notRepeatable) {
+        this.addNotRepeatableValidator(model);
+      }
+      return model;
 
     } else {
       const model = this.modelFactory(this.getInitFieldValue());
@@ -426,6 +456,17 @@
       { required: this.configData.mandatoryMessage });
   }
 
+  protected addNotRepeatableValidator(controlModel) {
+    controlModel.validators = Object.assign({}, controlModel.validators, { notRepeatable: null });
+    controlModel.errorMessages = Object.assign(
+      {},
+      controlModel.errorMessages,
+      {
+        notRepeatable: 'error.validation.not.repeatable',
+      },
+    );
+  }
+
   protected setLabel(controlModel, label = true, labelEmpty = false) {
     if (label) {
       controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;

src/app/shared/form/form.service.ts

@@ -217,7 +217,7 @@ export class FormService {
       });
     }
 
-    field.markAsUntouched();
+    field.markAsUntouched({ onlySelf: true });
   }
 
   public resetForm(formGroup: UntypedFormGroup, groupModel: DynamicFormControlModel[], formId: string) {

src/app/submission/sections/form/section-form.component.ts

@@ -298,6 +298,9 @@
    * @private
    */
   private inCurrentSubmissionScope(field: string): boolean {
+    if (isNotEmpty(this.sectionMetadata) && !this.sectionMetadata.includes(field)) {
+      return false;
+    }
     const scope = this.formConfig?.rows.find((row: FormRowModel) => {
       if (row.fields?.[0]?.selectableMetadata) {
         return row.fields?.[0]?.selectableMetadata?.[0]?.metadata === field;

src/assets/i18n/en.json5

@@ -1910,6 +1910,8 @@
 
   "error.validation.required": "This field is required",
 
+  "error.validation.not.repeatable": "This field only accepts one value. Please discard the additional ones.",
+
   "error.validation.NotValidEmail": "This is not a valid email",
 
   "error.validation.emailTaken": "This email is already taken",