feat: introduce formly field plain-text-field

docs/guides/formly.md

@@ -252,7 +252,7 @@ Refer to the tables below for an overview of these parts.
 
 ### Field Types
 
-Template option `inputClass`: These css class(es) will be added to all input/select/textarea tags.
+Template option `inputClass`: These css class(es) will be added to all input/select/textarea/text tags.
 
 | Name                 | Description                                                                                  | Relevant templateOptions                                                                                                      |
 | -------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -266,6 +266,7 @@ Template option `inputClass`: These css class(es) will be added to all input/sel
 | ish-fieldset-field   | Wraps fields in a `<fieldset>` tag for styling                                               | `fieldsetClass`: Class that will be added to the fieldset tag. `childClass`: Class that will be added to the child div.       |
 | 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                                                                  | ----                                                                                                                          |
 
 ### Wrappers
 

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

@@ -30,6 +30,9 @@ class RadioFieldComponent extends FieldType {}
 @Component({ template: 'TextInputFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
 class TextInputFieldComponent extends FieldType {}
 
+@Component({ template: 'PlainTextFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
+class PlainTextFieldComponent extends FieldType {}
+
 @Component({ template: 'EmailFieldComponent: {{ field.key }} {{ field.type }} {{ to | json }}' })
 class EmailFieldComponent extends FieldType {}
 
@@ -59,6 +62,7 @@ class DummyWrapperComponent extends FieldWrapper {}
     FieldsetFieldComponent,
     PasswordFieldComponent,
     PhoneFieldComponent,
+    PlainTextFieldComponent,
     RadioFieldComponent,
     SelectFieldComponent,
     TextInputFieldComponent,
@@ -72,6 +76,10 @@ class DummyWrapperComponent extends FieldWrapper {}
           name: 'ish-text-input-field',
           component: TextInputFieldComponent,
         },
+        {
+          name: 'ish-plain-text-field',
+          component: TextInputFieldComponent,
+        },
         {
           name: 'ish-fieldset-field',
           component: FieldsetFieldComponent,

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

@@ -22,6 +22,7 @@ import { registerTranslateSelectOptionsExtension } from './extensions/translate-
 import { CaptchaFieldComponent } from './types/captcha-field/captcha-field.component';
 import { CheckboxFieldComponent } from './types/checkbox-field/checkbox-field.component';
 import { FieldsetFieldComponent } from './types/fieldset-field/fieldset-field.component';
+import { PlainTextFieldComponent } from './types/plain-text-field/plain-text-field.component';
 import { RadioFieldComponent } from './types/radio-field/radio-field.component';
 import { SelectFieldComponent } from './types/select-field/select-field.component';
 import { TextInputFieldComponent } from './types/text-input-field/text-input-field.component';
@@ -46,6 +47,11 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
           component: TextInputFieldComponent,
           wrappers: ['form-field-horizontal', 'validation'],
         },
+        {
+          name: 'ish-plain-text-field',
+          component: PlainTextFieldComponent,
+          wrappers: ['form-field-horizontal'],
+        },
         {
           name: 'ish-email-field',
           extends: 'ish-text-input-field',
@@ -163,6 +169,7 @@ import { ValidationWrapperComponent } from './wrappers/validation-wrapper/valida
     HorizontalCheckboxWrapperComponent,
     HorizontalWrapperComponent,
     InputAddonWrapperComponent,
+    PlainTextFieldComponent,
     RadioFieldComponent,
     SelectFieldComponent,
     TextInputFieldComponent,

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

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

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

@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroup, ReactiveFormsModule } 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 { PlainTextFieldComponent } from './plain-text-field.component';
+
+describe('Plain Text Field Component', () => {
+  let component: FormlyTestingContainerComponent;
+  let fixture: ComponentFixture<FormlyTestingContainerComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PlainTextFieldComponent],
+      imports: [
+        FormlyModule.forRoot({
+          types: [
+            {
+              name: 'ish-plain-text-field',
+              component: PlainTextFieldComponent,
+            },
+          ],
+        }),
+        FormlyTestingComponentsModule,
+        ReactiveFormsModule,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    const testComponentInputs = {
+      fields: [
+        {
+          key: 'displayValue',
+          type: 'ish-plain-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-plain-text-field > div.col-form-label')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+  selector: 'ish-plain-text-field',
+  templateUrl: './plain-text-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PlainTextFieldComponent extends FieldType {
+  get textValue() {
+    return this.form.get(this.field.key as string)?.value;
+  }
+}