NAS-132300 / 25.04 / Create a configurable full-page form with glossary section and help

src/app/directives/navigate-and-interact/navigate-and-interact.service.ts

@@ -16,13 +16,13 @@ export class NavigateAndInteractService {
       setTimeout(() => {
         const htmlElement = this.window.document.getElementById(hash);
         if (htmlElement) {
-          this.handleHashScrollIntoView(htmlElement);
+          this.scrollIntoView(htmlElement);
         }
       }, 150);
     });
   }
 
-  private handleHashScrollIntoView(htmlElement: HTMLElement): void {
+  scrollIntoView(htmlElement: HTMLElement): void {
     const highlightedClass = 'highlighted-element';
     htmlElement.scrollIntoView({ block: 'center' });
     htmlElement.classList.add(highlightedClass);

src/app/interfaces/form-sections.interface.ts

@@ -0,0 +1,8 @@
+import { NgControl } from '@angular/forms';
+import { IxFormSectionComponent } from 'app/modules/forms/ix-forms/components/ix-form-section/ix-form-section.component';
+
+export interface ControlNameWithLabel { label: string; name: string }
+export interface SectionWithControls {
+  section: IxFormSectionComponent;
+  controls: Map<string, NgControl | null> | undefined;
+}

src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html

@@ -72,6 +72,7 @@
           >
             @for (element of getFormArray.controls; track element; let i = $index) {
               <ix-list-item
+                [formGroupName]="i"
                 [label]="dynamicSchema.title | translate"
                 [canDelete]="!isAllListControlsDisabled"
                 (delete)="removeControl(i)"

src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html

@@ -8,7 +8,6 @@
 }
 
 <mat-button-toggle-group
-  ixRegisteredControl
   [value]="value"
   [disabled]="isDisabled"
   [ixTest]="controlDirective.name"

src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts

@@ -2,15 +2,15 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, input,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleChange, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { MatHint } from '@angular/material/form-field';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { Option } from 'app/interfaces/option.interface';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 
@@ -26,12 +26,17 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     MatButtonToggle,
     IxErrorsComponent,
     MatHint,
+    ReactiveFormsModule,
     AsyncPipe,
     TranslateModule,
     TestOverrideDirective,
+    RegisteredControlDirective,
     TestDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxButtonGroupComponent implements ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.component.html

@@ -7,7 +7,6 @@
 }
 
 <div
-  ixRegisteredControl
   class="checkbox-list"
   [class.inline]="inlineFields()"
   [attr.aria-label]="label()"

src/app/modules/forms/ix-forms/components/ix-checkbox-list/ix-checkbox-list.component.ts

@@ -2,15 +2,15 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, input,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { Option } from 'app/interfaces/option.interface';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 
 @UntilDestroy()
@@ -24,11 +24,16 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     IxLabelComponent,
     MatCheckbox,
     IxErrorsComponent,
+    ReactiveFormsModule,
     AsyncPipe,
+    RegisteredControlDirective,
     TranslateModule,
     TestDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxCheckboxListComponent implements ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component.html

@@ -1,5 +1,4 @@
 <mat-checkbox
-  ixRegisteredControl
   color="primary"
   [checked]="value"
   [required]="required()"

src/app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component.ts

@@ -3,13 +3,14 @@ import {
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
+  ReactiveFormsModule,
 } from '@angular/forms';
 import { MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
 import { MatHint } from '@angular/material/form-field';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { WarningComponent } from 'app/modules/forms/ix-forms/components/warning/warning.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 
@@ -25,10 +26,14 @@ import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
     TooltipComponent,
     WarningComponent,
     IxErrorsComponent,
+    ReactiveFormsModule,
     MatHint,
     TestDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxCheckboxComponent implements ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.html

@@ -11,7 +11,6 @@
   <mat-chip-grid
     #chipList
     class="form-chip"
-    ixRegisteredControl
     [disabled]="isDisabled"
     [required]="required()"
     [attr.aria-label]="label()"

src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.ts

@@ -9,7 +9,7 @@ import {
   OnChanges,
   ViewChild,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import {
   MatChipGrid, MatChipRow, MatChipRemove, MatChipInput,
@@ -27,7 +27,7 @@ import { Option } from 'app/interfaces/option.interface';
 import { ChipsProvider } from 'app/modules/forms/ix-forms/components/ix-chips/chips-provider';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
@@ -46,16 +46,21 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     IxIconComponent,
     MatChipRemove,
     MatAutocompleteTrigger,
+    ReactiveFormsModule,
     MatChipInput,
     MatAutocomplete,
     MatOption,
     IxErrorsComponent,
     MatHint,
     AsyncPipe,
     TestDirective,
+    RegisteredControlDirective,
     TestOverrideDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxChipsComponent implements OnChanges, ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.component.html

@@ -9,7 +9,6 @@
   }
 
   <div
-    ixRegisteredControl
     class="input-container"
     [class.disabled]="disabledState$ | async"
   >

src/app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.component.ts

@@ -10,7 +10,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatHint } from '@angular/material/form-field';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { Compartment } from '@codemirror/state';
@@ -29,7 +29,7 @@ import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 import { IxSelectValue } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 
 @UntilDestroy()
@@ -43,10 +43,14 @@ import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-ov
     IxLabelComponent,
     IxErrorsComponent,
     MatHint,
+    ReactiveFormsModule,
     AsyncPipe,
     TestOverrideDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxCodeEditorComponent implements OnChanges, OnInit, AfterViewInit, ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html

@@ -12,7 +12,6 @@
     <input
       #ixInput
       matInput
-      ixRegisteredControl
       [value]="selectedOption?.label || textContent"
       [placeholder]="allowCustomValue() ? ('Search or enter value' | translate) : ('Search' | translate)"
       [disabled]="isDisabled"

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
+  ReactiveFormsModule,
 } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatOption } from '@angular/material/core';
@@ -29,7 +30,7 @@ import { Option } from 'app/interfaces/option.interface';
 import { IxComboboxProvider, IxComboboxProviderManager } from 'app/modules/forms/ix-forms/components/ix-combobox/ix-combobox-provider';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
@@ -51,11 +52,16 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
     MatOption,
     IxErrorsComponent,
     MatHint,
+    ReactiveFormsModule,
     TranslateModule,
+    RegisteredControlDirective,
     TestOverrideDirective,
     TestDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxComboboxComponent implements ControlValueAccessor, OnInit {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-date-picker/ix-date-picker.component.html

@@ -7,7 +7,7 @@
   ></ix-label>
 }
 
-<div class="input-container" ixRegisteredControl>
+<div class="input-container">
   <mat-datepicker #datepicker></mat-datepicker>
   <input
     matInput

src/app/modules/forms/ix-forms/components/ix-date-picker/ix-date-picker.component.ts

@@ -1,7 +1,7 @@
 import {
   Component, ChangeDetectionStrategy, input, signal,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter } from '@angular/material/core';
 import { MatDatepickerInputEvent, MatDatepickerModule } from '@angular/material/datepicker';
 import { MatHint, MatSuffix } from '@angular/material/form-field';
@@ -12,7 +12,7 @@ import { FormatDateTimePipe } from 'app/modules/dates/pipes/format-date-time/for
 import { IxDateAdapter } from 'app/modules/dates/services/ix-date-adapter';
 import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { LocaleService } from 'app/services/locale.service';
@@ -32,12 +32,16 @@ type OnTouchedFn = () => void;
     MatDatepickerModule,
     MatHint,
     MatInput,
+    ReactiveFormsModule,
     TestDirective,
     TestOverrideDirective,
     TranslateModule,
     MatSuffix,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
   providers: [
     FormatDateTimePipe,
     {

src/app/modules/forms/ix-forms/components/ix-explorer/ix-explorer.component.html

@@ -13,7 +13,6 @@
     matInput
     type="text"
     autocomplete="off"
-    ixRegisteredControl
     [value]="inputValue"
     [ixTest]="controlDirective.name"
     [required]="required()"

src/app/modules/forms/ix-forms/components/ix-explorer/ix-explorer.component.ts

@@ -6,7 +6,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatError, MatHint } from '@angular/material/form-field';
@@ -29,7 +29,7 @@ import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-erro
 import { CreateDatasetDialogComponent } from 'app/modules/forms/ix-forms/components/ix-explorer/create-dataset-dialog/create-dataset-dialog.component';
 import { TreeNodeProvider } from 'app/modules/forms/ix-forms/components/ix-explorer/tree-node-provider.interface';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
+import { RegisteredControlDirective, registeredDirectiveConfig } from 'app/modules/forms/ix-forms/directives/registered-control.directive';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive';
 import { TestDirective } from 'app/modules/test-id/test.directive';
@@ -54,9 +54,13 @@ import { ErrorHandlerService } from 'app/services/error-handler.service';
     TranslateModule,
     RequiresRolesDirective,
     TestDirective,
+    ReactiveFormsModule,
     TestOverrideDirective,
     RegisteredControlDirective,
   ],
+  hostDirectives: [
+    { ...registeredDirectiveConfig },
+  ],
 })
 export class IxExplorerComponent implements OnInit, OnChanges, ControlValueAccessor {
   readonly label = input<string>();

src/app/modules/forms/ix-forms/components/ix-file-input/ix-file-input.component.html

@@ -14,7 +14,6 @@
       <input
         #fileInput
         type="file"
-        ixRegisteredControl
         [accept]="acceptedFiles()"
         [ixTest]="controlDirective.name"
         [required]="required()"