feat: simple json editor

Author: artemtek

dist/ngx-forms.js

@@ -0,0 +1,3 @@
+<ng-container [formGroup]="group">
+    <json-control [formControlName]="field.name"></json-control>
+</ng-container>

src/app/fields/form-json/form-json.component.html

@@ -0,0 +1,44 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormJsonComponent } from './form-json.component'
+import { ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
+import { APP_BASE_HREF } from '@angular/common';
+import { JsonControlValueAccessorComponent } from './json-control/json-control.component'
+
+describe('FormJsonComponent', () => {
+    let component: FormJsonComponent;
+    let fixture: ComponentFixture<FormJsonComponent>;
+    const formBuilder: FormBuilder = new FormBuilder();
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                ReactiveFormsModule
+            ],
+            declarations: [FormJsonComponent, JsonControlValueAccessorComponent],
+            providers: [
+                { provide: APP_BASE_HREF, useValue: '/' }
+            ]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FormJsonComponent);
+        component = fixture.componentInstance;
+        component.group = formBuilder.group({ testName: formBuilder.control('') });
+        component.field = {
+            "type": "text",
+            "label": "Explain",
+            "name": "testName",
+            "required": true
+        };
+
+        fixture.detectChanges();
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+});

src/app/fields/form-json/form-json.component.spec.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { BaseFieldComponent } from '../base-field';
+
+@Component({
+    selector: 'form-json',
+    template: require('./form-json.component.html')
+})
+
+export class FormJsonComponent extends BaseFieldComponent { }

src/app/fields/form-json/form-json.component.ts

@@ -0,0 +1,126 @@
+import { JsonControlValueAccessorComponent } from './json-control.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+describe('MulticheckboxControlComponent', () => {
+    let component: JsonControlValueAccessorComponent;
+    let fixture: ComponentFixture<JsonControlValueAccessorComponent>;
+
+    const model = { test: 1 };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                ReactiveFormsModule,
+                FormsModule,
+            ],
+            declarations: [JsonControlValueAccessorComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(JsonControlValueAccessorComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should not throw error', () => {
+        expect(() => { component.onModelTouched(123); }).not.toThrowError();
+    });
+
+    describe('writeValue()', () => {
+        it('should set value', () => {
+            component.writeValue(model);
+            expect(component.textarea.nativeElement.value).toEqual(JSON.stringify(model));
+        });
+
+        it('should not set value', () => {
+            const val = component.textarea.nativeElement.value
+            component.writeValue(null);
+            expect(component.textarea.nativeElement.value).toEqual(val);
+        });
+    });
+
+    describe('registerOnChange()', () => {
+        it('should register onChange', () => {
+            const foo = { log: (val) => { } };
+            spyOn(foo, 'log');
+            const x = (val) => foo.log(val);
+            component.registerOnChange(x);
+            component.onModelChange(123);
+            expect(foo.log).toHaveBeenCalled();
+        });
+    });
+
+    describe('registerOnTouched()', () => {
+        it('should register onTouch', () => {
+            const foo = { log: (val) => { } }; spyOn(foo, 'log');
+            const x = (val) => foo.log(val);
+            component.registerOnTouched(x);
+            component.onModelTouched(123);
+            expect(foo.log).toHaveBeenCalled();
+        });
+    });
+
+    describe('setDisabledState()', () => {
+        it('should set disalbed', () => {
+            component.setDisabledState(true);
+            expect(component.textarea.nativeElement.disabled).toBeTruthy();
+        });
+
+        it('should set enabled', () => {
+            component.setDisabledState(false);
+            expect(component.textarea.nativeElement.disabled).toBeFalsy();
+        });
+    });
+
+    describe('validate()', () => {
+        it('should call validate', () => {
+            expect(component.validate()).toBeDefined();
+        });
+
+        it('should return errors', () => {
+            component.required = true;
+            component.writeValue(null);
+            const res = component.validate();
+            expect(res.required).toBeTruthy();
+        });
+
+        it('should not return errors when component is not required', () => {
+            component.required = false;
+            const mdl = []
+            component.writeValue(mdl);
+            const res = component.validate();
+            expect(res).toBeFalsy();
+        });
+
+        it('should not return required error', () => {
+            const mdl = ['one']
+
+            component.writeValue(mdl);
+            const res = component.validate();
+            expect(res).toBeFalsy();
+        });
+    });
+
+    describe('onChange()', () => {
+        it('should update value', () => {
+            spyOn(component, 'onModelChange');
+            component.onChange("{}");
+            expect(component.valid).toBeTruthy();
+            expect(component.onModelChange).toHaveBeenCalledWith({});
+        });
+
+        it('should not update value when input is invalid', () => {
+            spyOn(component, 'onModelChange');
+            component.onChange("{1111}");
+            expect(component.valid).toBeFalsy();
+            expect(component.onModelChange).not.toHaveBeenCalled();
+        });
+    });
+
+});

src/app/fields/form-json/json-control/json-control.component.spec.ts

@@ -0,0 +1,66 @@
+import { ElementRef, Component, ViewChild, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Component({
+    providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: JsonControlValueAccessorComponent
+        }
+    ],
+    selector: 'json-control',
+    template: '<textarea class="form-control" rows="3" #textarea (input)="onChange($event.target.value)"></textarea>'
+})
+export class JsonControlValueAccessorComponent implements ControlValueAccessor {
+    public disabled = false;
+    public valid = true;
+
+    @ViewChild('textarea', { static: false }) textarea: ElementRef;
+    @Input() required = false;
+    onModelChange = (model: any) => { };
+    onModelTouched = (model: any) => { };
+
+    writeValue(value: any) {
+        if (value) {
+            this.textarea.nativeElement.value = JSON.stringify(value);
+        }
+    }
+
+    registerOnChange(fn: any): void {
+        this.onModelChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onModelTouched = fn;
+    }
+
+    setDisabledState(disabled: boolean): void {
+        this.textarea.nativeElement.disabled = disabled;
+        this.disabled = disabled;
+    }
+
+    onChange(value): void {
+        try {
+            const json = JSON.parse(value);
+            this.valid = true;
+            this.onModelChange(json);
+        } catch (e) {
+            this.valid = false;
+        }
+
+    }
+
+    validate() {
+        const err: { required?: boolean } = {};
+        let valid = true;
+
+        if (!this.valid || this.required && !this.textarea.nativeElement.value) {
+            err.required = true;
+            valid = false;
+        }
+
+        return valid ? null : err;
+    }
+
+}

src/app/fields/form-json/json-control/json-control.component.ts

@@ -10,6 +10,8 @@ import { FormLabelComponent } from './form-label/form-label.component';
 import { FormDateComponent } from './form-date/form-date.component';
 import { FieldDictionary } from '../../types';
 import { MulticheckboxControlComponent } from './form-multicheckbox/multicheckbox-control/multicheckbox-control.component';
+import { FormJsonComponent } from './form-json/form-json.component';
+import { JsonControlValueAccessorComponent } from './form-json/json-control/json-control.component';
 
 export const Fields: FieldDictionary = {
     text: FormInputComponent,
@@ -21,7 +23,8 @@ export const Fields: FieldDictionary = {
     radio: FormRadioComponent,
     checkbox: FormCheckboxComponent,
     label: FormLabelComponent,
-    date: FormDateComponent
+    date: FormDateComponent,
+    json: FormJsonComponent
 };
 
 export const FieldComponents = [
@@ -35,8 +38,10 @@ export const FieldComponents = [
     FormCheckboxComponent,
     FormLabelComponent,
     FormDateComponent,
+    FormJsonComponent
 ];
 
 export const CustomInputs = [
-    MulticheckboxControlComponent
+    MulticheckboxControlComponent,
+    JsonControlValueAccessorComponent
 ];