Fixed hints & required error messages for input-type list

- Added mapping for required & hint properties
- Set the required type on the checkbox group instead of on each checkbox individually

Author: alexandrevryghem

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -130,12 +130,14 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     new DynamicListCheckboxGroupModel({
       id: 'checkboxList',
       vocabularyOptions: vocabularyOptions,
-      repeatable: true
+      repeatable: true,
+      required: false,
     }),
     new DynamicListRadioGroupModel({
       id: 'radioList',
       vocabularyOptions: vocabularyOptions,
-      repeatable: false
+      repeatable: false,
+      required: false,
     }),
     new DynamicRelationGroupModel({
       submissionId: '1234',

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts

@@ -14,7 +14,9 @@ export interface DynamicListCheckboxGroupModelConfig extends DynamicFormGroupMod
   vocabularyOptions: VocabularyOptions;
   groupLength?: number;
   repeatable: boolean;
-  value?: any;
+  value?: VocabularyEntry[];
+  required: boolean;
+  hint?: string;
 }
 
 export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
@@ -23,6 +25,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
   @serializable() repeatable: boolean;
   @serializable() groupLength: number;
   @serializable() _value: VocabularyEntry[];
+  @serializable() required: boolean;
+  @serializable() hint: string;
   isListGroup = true;
   valueUpdates: Subject<any>;
 
@@ -33,6 +37,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
     this.groupLength = config.groupLength || 5;
     this._value = [];
     this.repeatable = config.repeatable;
+    this.required = config.required;
+    this.hint = config.hint;
 
     this.valueUpdates = new Subject<any>();
     this.valueUpdates.subscribe((value: VocabularyEntry | VocabularyEntry[]) => this.value = value);
@@ -52,9 +58,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
       if (Array.isArray(value)) {
         this._value = value;
       } else {
-        // _value is non extendible so assign it a new array
-        const newValue = (this.value as VocabularyEntry[]).concat([value]);
-        this._value = newValue;
+        // _value is non-extendable so assign it a new array
+        this._value = (this.value as VocabularyEntry[]).concat([value]);
       }
     }
   }

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts

@@ -6,19 +6,24 @@ import {
 } from '@ng-dynamic-forms/core';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { hasValue } from '../../../../../empty.util';
+import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 
 export interface DynamicListModelConfig extends DynamicRadioGroupModelConfig<any> {
   vocabularyOptions: VocabularyOptions;
   groupLength?: number;
   repeatable: boolean;
-  value?: any;
+  value?: VocabularyEntry[];
+  required: boolean;
+  hint?: string;
 }
 
 export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
 
   @serializable() vocabularyOptions: VocabularyOptions;
   @serializable() repeatable: boolean;
   @serializable() groupLength: number;
+  @serializable() required: boolean;
+  @serializable() hint: string;
   isListGroup = true;
 
   constructor(config: DynamicListModelConfig, layout?: DynamicFormControlLayout) {
@@ -27,6 +32,8 @@ export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
     this.vocabularyOptions = config.vocabularyOptions;
     this.groupLength = config.groupLength || 5;
     this.repeatable = config.repeatable;
+    this.required = config.required;
+    this.hint = config.hint;
     this.value = config.value;
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html

@@ -17,7 +17,6 @@
                  [id]="item.id"
                  [formControlName]="item.id"
                  [name]="model.name"
-                 [required]="model.required"
                  [value]="item.value"
                  (blur)="onBlur($event)"
                  (change)="onChange($event)"

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

@@ -1,6 +1,5 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
+import { FormGroup, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
 import {
   DynamicCheckboxModel,
   DynamicFormControlComponent,
@@ -110,6 +109,9 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   protected setOptionsFromVocabulary() {
     if (this.model.vocabularyOptions.name && this.model.vocabularyOptions.name.length > 0) {
       const listGroup = this.group.controls[this.model.id] as FormGroup;
+      if (this.model.repeatable && this.model.required) {
+        listGroup.setValidators(this.hasAtLeastOneVocabularyEntry());
+      }
       const pageInfo: PageInfo = new PageInfo({
         elementsPerPage: 9999, currentPage: 1
       } as PageInfo);
@@ -121,7 +123,7 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
         let tempList: ListItem[] = [];
         this.optionsList = entries.page;
         // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        entries.page.forEach((option, key) => {
+        entries.page.forEach((option: VocabularyEntry, key: number) => {
           const value = option.authority || option.value;
           const checked: boolean = isNotEmpty(findKey(
             this.model.value,
@@ -156,4 +158,13 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
     }
   }
 
+  /**
+   * Checks if at least one {@link VocabularyEntry} has been selected.
+   */
+  hasAtLeastOneVocabularyEntry(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      return control && control.value && Object.values(control.value).find((checked: boolean) => checked === true) ? null : this.model.errorMessages;
+    };
+  }
+
 }

src/app/shared/form/builder/form-builder.service.spec.ts

@@ -220,10 +220,16 @@ describe('FormBuilderService test suite', () => {
       new DynamicListCheckboxGroupModel({
         id: 'testCheckboxList',
         vocabularyOptions: vocabularyOptions,
-        repeatable: true
+        repeatable: true,
+        required: false,
       }),
 
-      new DynamicListRadioGroupModel({ id: 'testRadioList', vocabularyOptions: vocabularyOptions, repeatable: false }),
+      new DynamicListRadioGroupModel({
+        id: 'testRadioList',
+        vocabularyOptions: vocabularyOptions,
+        repeatable: false,
+        required: false,
+      }),
 
       new DynamicRelationGroupModel({
         submissionId,