Different approach to link ids in submission form

Matus Kasak · Matus Kasak · commit 85e9de00facb · 2026-02-18T17:34:14.000+01:00
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -3,7 +3,7 @@
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   <label *ngIf="!isCheckbox && hasLabel"
-         [id]="'label_' + model.id"
+         [id]="'label_' + id"
          [for]="id"
          [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
          [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -253,11 +253,36 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    * Determines whether to request embedded thumbnail.
    */
   fetchThumbnail: boolean;
+  
+  /**
+   * Unique suffix for generating unique IDs for this container instance
+   */
+  private uniqueSuffix: string;
 
   get componentType(): Type<DynamicFormControl> | null {
     return dsDynamicFormControlMapFn(this.model);
   }
 
+  /**
+   * Get unique ID for this form control
+   * Appends unique suffix to avoid ID collisions in repeatable form arrays
+   */
+  get id(): string {
+    if (this.bindId && this.model) {
+      const baseId = this.model.id;
+      // Check if we're in a form array context
+      if (this.context && this.context instanceof DynamicFormArrayGroupModel && hasValue(this.context.index)) {
+        return `${baseId}_${this.context.index}`;
+      }
+      // For components that don't properly receive context, use unique suffix
+      if (!this.uniqueSuffix) {
+        this.uniqueSuffix = Math.random().toString(36).substr(2, 9);
+      }
+      return `${baseId}_${this.uniqueSuffix}`;
+    }
+    return this.model?.id || '';
+  }
+
   constructor(
     protected componentFactoryResolver: ComponentFactoryResolver,
     protected dynamicFormComponentService: DynamicFormComponentService,
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/autocomplete/ds-dynamic-autocomplete.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/autocomplete/ds-dynamic-autocomplete.component.html
@@ -5,7 +5,7 @@
   <label *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></label>
   <input class="form-control"
          type="text"
-         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.aria-labelledby]="'label_' + id"
          [(ngModel)]="currentValue"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="group" class="input-group">
 
     <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
-           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.aria-labelledby]="'label_' + id"
            [class.is-invalid]="showErrorMessages"
            [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
            [id]="id"
@@ -27,7 +27,7 @@
 
         <button class="btn btn-outline-secondary"
                 type="button"
-                [attr.aria-labelledby]="'label_' + model.id"
+                [attr.aria-labelledby]="'label_' + id"
                 [class.disabled]="model.disabled"
                 [dsBtnDisabled]="model.disabled"
                 (click)="datepicker.toggle()">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -11,7 +11,7 @@
       <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
 
           <input type="checkbox" class="custom-control-input"
-                 [attr.aria-labelledby]="'label_' + model.id"
+                 [attr.aria-labelledby]="'label_' + id"
                  [attr.tabindex]="item.index"
                  [checked]="item.value"
                  [id]="item.id"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -11,7 +11,7 @@
          [authorityValue]="model.value"
          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
       <input class="form-control"
-             [attr.aria-labelledby]="'label_' + model.id"
+             [attr.aria-labelledby]="'label_' + id"
              [attr.autoComplete]="model.autoComplete"
              [class.is-invalid]="showErrorMessages"
              [id]="model.id"
@@ -31,7 +31,7 @@
     <div *ngIf="isLookupName()" class="col" >
       <input  class="form-control"
               [ngClass]="{}"
-              [attr.aria-labelledby]="'label_' + model.id"
+              [attr.aria-labelledby]="'label_' + id"
               [attr.autoComplete]="model.autoComplete"
               [class.is-invalid]="showErrorMessages"
               [id]="id"
@@ -86,7 +86,7 @@
        class="dropdown-menu scrollable-dropdown-menu w-100"
        aria-haspopup="true"
        aria-expanded="false"
-       [attr.aria-labelledby]="'label_' + model.id">
+       [attr.aria-labelledby]="'label_' + id">
     <div class="scrollable-menu"
          infiniteScroll
          [infiniteScrollDistance]="2"
@@ -113,7 +113,7 @@
 </div>
 
 <ng-template #hasInfo let-entry="entry">
-  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
+  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + id">
     <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
     <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
       {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
@@ -122,7 +122,7 @@
 </ng-template>
 
 <ng-template #noInfo let-entry="entry">
-  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
+  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + id">
     <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
   </ul>
 </ng-template>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -30,7 +30,7 @@
      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
   <input #instance="ngbTypeahead"
          class="form-control"
-         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.aria-labelledby]="'label_' + id"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
          [id]="model.id"
@@ -56,7 +56,7 @@
   <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
      aria-hidden="true"></i>
   <input class="form-control"
-         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.aria-labelledby]="'label_' + id"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
          [class.tree-input]="!model.readOnly"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -13,7 +13,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Observable, of as observableOf } from 'rxjs';
 import { catchError, distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
-import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
+import { DynamicFormArrayGroupModel, DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 
 import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
@@ -44,6 +44,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   @Input() bindId = true;
   @Input() group: UntypedFormGroup;
   @Input() model: DynamicScrollableDropdownModel;
+  @Input() context: any | null = null;
 
   @Output() blur: EventEmitter<any> = new EventEmitter<any>();
   @Output() change: EventEmitter<any> = new EventEmitter<any>();
@@ -56,6 +57,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public inputText: string = null;
   public selectedIndex = 0;
   public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
+  private uniqueSuffix: string;
 
   /**
    * If true the component can rely on the findAll method for data loading.
@@ -78,6 +80,23 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
               protected validationService: DynamicFormValidationService
   ) {
     super(vocabularyService, layoutService, validationService);
+    // Generate a unique suffix for this component instance to avoid ID collisions
+    this.uniqueSuffix = Math.random().toString(36).substr(2, 9);
+  }
+
+  /**
+   * Get unique ID for this form control
+   */
+  get id(): string {
+    const baseId = this.bindId ? this.model.id : this.model.id;
+    
+    // Try to get index from context if available
+    if (this.context && this.context instanceof DynamicFormArrayGroupModel && hasValue(this.context.index)) {
+      return `${baseId}_${this.context.index}`;
+    }
+    
+    // Use the unique suffix to ensure uniqueness
+    return `${baseId}_${this.uniqueSuffix}`;
   }
 
   /**
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/sponsor-autocomplete/ds-dynamic-sponsor-autocomplete.component.html
@@ -5,7 +5,7 @@
   <label *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></label>
   <input class="form-control"
          type="text"
-         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.aria-labelledby]="'label_' + id"
          [(ngModel)]="currentValue"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -25,7 +25,7 @@
     <i *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
     <input class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
            type="text"
-           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.aria-labelledby]="'label_' + id"
            [(ngModel)]="currentValue"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
diff --git a/src/app/submission/sections/clarin-license-resource/section-license.component.html b/src/app/submission/sections/clarin-license-resource/section-license.component.html
@@ -68,7 +68,7 @@
                   *ngFor="let license of filteredLicenses4Selector"
                   (click)="selectLicense(license.id)"
                   [value]="license.id"
-                  id="license_option">
+                  [id]="'license_option_' + license.id">
                 <span [class]="'label label-default label-' + license.licenseLabel">{{license.licenseLabel}}</span>
                 <b class="pl-1">{{license.name}}</b>
               </li>
