Added hint message to form fields

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

@@ -28,6 +28,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
   constructor(config: DsDynamicInputModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
 
+    this.hint = config.hint;
     this.readOnly = config.readOnly;
     this.value = config.value;
     this.language = config.language;
@@ -57,11 +58,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
   }
 
   get hasLanguages(): boolean {
-    if (this.languageCodes && this.languageCodes.length > 1) {
-      return true;
-    } else {
-      return false;
-    }
+    return this.languageCodes && this.languageCodes.length > 1;
   }
 
   get language(): string {

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

-import { DynamicFormControlLayout, DynamicFormGroupModel, DynamicInputModelConfig, serializable } from '@ng-dynamic-forms/core';
-import { DsDynamicInputModel, DsDynamicInputModelConfig } from './ds-dynamic-input.model';
+import { DynamicFormControlLayout, DynamicFormGroupModel, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel } from './ds-dynamic-input.model';
 import { Subject } from 'rxjs';
 import { DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core/src/model/form-group/dynamic-form-group.model';
 import { LanguageCode } from '../../models/form-field-language-value.model';
@@ -12,6 +12,7 @@ export interface DsDynamicQualdropModelConfig extends DynamicFormGroupModelConfi
   languageCodes?: LanguageCode[];
   language?: string;
   readOnly: boolean;
+  hint?: string;
 }
 
 export class DynamicQualdropModel extends DynamicFormGroupModel {
@@ -20,6 +21,7 @@ export class DynamicQualdropModel extends DynamicFormGroupModel {
   @serializable() languageUpdates: Subject<string>;
   @serializable() hasLanguages = false;
   @serializable() readOnly: boolean;
+  @serializable() hint: string;
   isCustomGroup = true;
 
   constructor(config: DsDynamicQualdropModelConfig, layout?: DynamicFormControlLayout) {
@@ -33,6 +35,8 @@ export class DynamicQualdropModel extends DynamicFormGroupModel {
     this.languageUpdates.subscribe((lang: string) => {
       this.language = lang;
     });
+
+    this.hint = config.hint;
   }
 
   get value() {

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

@@ -190,6 +190,8 @@ export abstract class FieldParser {
 
     controlModel.placeholder = this.configData.label;
 
+    controlModel.hint = this.configData.hints;
+
     if (this.configData.mandatory && setErrors) {
       this.markAsRequired(controlModel);
     }

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

@@ -24,6 +24,7 @@ export class OneboxFieldParser extends FieldParser {
       const clsGroup = {
         element: {
           control: 'form-row',
+          hint: 'ds-form-qualdrop-hint'
         }
       };
 
@@ -54,8 +55,10 @@ export class OneboxFieldParser extends FieldParser {
       inputSelectGroup.id = newId.replace(/\./g, '_') + QUALDROP_GROUP_SUFFIX;
       inputSelectGroup.group = [];
       inputSelectGroup.legend = this.configData.label;
+      inputSelectGroup.hint = this.configData.hints;
 
       const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label);
+      selectModelConfig.hint = null;
       this.setOptions(selectModelConfig);
       if (isNotEmpty(fieldValue)) {
         selectModelConfig.value = fieldValue.metadata;
@@ -63,6 +66,7 @@ export class OneboxFieldParser extends FieldParser {
       inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
 
       const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, true);
+      inputModelConfig.hint = null;
       this.setValues(inputModelConfig, fieldValue);
 
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;

src/app/shared/form/form.component.scss

@@ -44,3 +44,8 @@
 .right-addon input {
   padding-right: $spacer * 2.25;
 }
+
+.ds-form-qualdrop-hint {
+  top: -$spacer;
+  position: relative;
+}