feat: add html text formly field type

docs/guides/formly.md

@@ -267,6 +267,7 @@ Template option `inputClass`: These css class(es) will be added to all input/sel
 | ish-captcha-field    | Includes the `<ish-lazy-captcha>` component and adds the relevant `formControls` to the form | `topic`: Topic that will be passed to the Captcha component.                                                                  |
 | ish-radio-field      | Basic radio input                                                                            | ----                                                                                                                          |
 | ish-plain-text-field | Only display the form value                                                                  | ----                                                                                                                          |
+| ish-html-text-field  | Only display the form value as html                                                          | ----                                                                                                                          |
 
 ### Wrappers
 

src/app/shared/formly/dev/testing/formly-testing.module.ts

@@ -42,6 +42,9 @@ class TextInputFieldComponent extends FieldType {}
 @Component({ template: 'PlainTextFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
 class PlainTextFieldComponent extends FieldType {}
 
+@Component({ template: 'HtmlTextFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
+class HtmlTextFieldComponent extends FieldType {}
+
 @Component({ template: 'EmailFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
 class EmailFieldComponent extends FieldType {}
 
@@ -74,6 +77,7 @@ class DatePickerFieldComponent extends FieldType {}
     DummyWrapperComponent,
     EmailFieldComponent,
     FieldsetFieldComponent,
+    HtmlTextFieldComponent,
     PasswordFieldComponent,
     PhoneFieldComponent,
     PlainTextFieldComponent,
@@ -92,7 +96,11 @@ class DatePickerFieldComponent extends FieldType {}
         },
         {
           name: 'ish-plain-text-field',
-          component: TextInputFieldComponent,
+          component: PlainTextFieldComponent,
+        },
+        {
+          name: 'ish-html-text-field',
+          component: HtmlTextFieldComponent,
         },
         {
           name: 'ish-fieldset-field',

src/app/shared/formly/types/html-text-field/html-text-field.component.html

@@ -0,0 +1 @@
+<div [ngClass]="to.inputClass ? to.inputClass : 'col-form-label'" [innerHtml]="textValue"></div>

src/app/shared/formly/types/html-text-field/html-text-field.component.spec.ts

@@ -0,0 +1,65 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroup } from '@angular/forms';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+
+import { FormlyTestingComponentsModule } from 'ish-shared/formly/dev/testing/formly-testing-components.module';
+import { FormlyTestingContainerComponent } from 'ish-shared/formly/dev/testing/formly-testing-container/formly-testing-container.component';
+
+import { HtmlTextFieldComponent } from './html-text-field.component';
+
+describe('Html Text Field Component', () => {
+  let component: FormlyTestingContainerComponent;
+  let fixture: ComponentFixture<FormlyTestingContainerComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HtmlTextFieldComponent],
+      imports: [
+        FormlyModule.forRoot({
+          types: [
+            {
+              name: 'ish-html-text-field',
+              component: HtmlTextFieldComponent,
+            },
+          ],
+        }),
+        FormlyTestingComponentsModule,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    const testComponentInputs = {
+      fields: [
+        {
+          key: 'displayValue',
+          type: 'ish-html-text-field',
+          templateOptions: {
+            label: 'test label',
+          },
+        } as FormlyFieldConfig,
+      ],
+      form: new FormGroup({}),
+      model: {
+        displayValue: 'testValue',
+      },
+    };
+    fixture = TestBed.createComponent(FormlyTestingContainerComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+
+    component.testComponentInputs = testComponentInputs;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should be rendered after creation', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('ish-html-text-field > div.col-form-label')).toBeTruthy();
+  });
+});

src/app/shared/formly/types/html-text-field/html-text-field.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+/**
+ * Type to display a html text value with optional styling
+ *
+ * @templateOption **inputClass** a class that will be used to style the div around the text
+ */
+@Component({
+  selector: 'ish-html-text-field',
+  templateUrl: './html-text-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HtmlTextFieldComponent extends FieldType {
+  get textValue() {
+    return this.form.get(this.field.key as string)?.value;
+  }
+}

src/app/shared/formly/types/types.module.ts

@@ -23,6 +23,7 @@ import { DatePickerFieldComponent } from './date-picker-field/date-picker-field.
 import { IshDatepickerI18n } from './date-picker-field/ish-datepicker-i18n';
 import { LocalizedParserFormatter } from './date-picker-field/localized-parser-formatter';
 import { FieldsetFieldComponent } from './fieldset-field/fieldset-field.component';
+import { HtmlTextFieldComponent } from './html-text-field/html-text-field.component';
 import { PlainTextFieldComponent } from './plain-text-field/plain-text-field.component';
 import { RadioFieldComponent } from './radio-field/radio-field.component';
 import { SelectFieldComponent } from './select-field/select-field.component';
@@ -34,6 +35,7 @@ const fieldComponents = [
   CheckboxFieldComponent,
   DatePickerFieldComponent,
   FieldsetFieldComponent,
+  HtmlTextFieldComponent,
   PlainTextFieldComponent,
   RadioFieldComponent,
   SelectFieldComponent,
@@ -63,6 +65,11 @@ const fieldComponents = [
           component: PlainTextFieldComponent,
           wrappers: ['form-field-horizontal'],
         },
+        {
+          name: 'ish-html-text-field',
+          component: HtmlTextFieldComponent,
+          wrappers: ['form-field-horizontal'],
+        },
         {
           name: 'ish-email-field',
           extends: 'ish-text-input-field',