Angular component that allows the creation of dynamic forms. You can use this component in situations where you get the configuration for the form from an external API or if you just hate HTML 😀

UI Style — for UI i used PrimeNG but you can use any Angular UI Library.

• Dynamically created form only from JSON configuration
• Full gird layout for forms
• Dummy fields without UI input fields
• You can group fields in same column
• Validation error messages
• Responsive forms
• 👇 Easy to add more supported fields

You can add more by yourself!

Clone repo and run:

npm install

ng serve -o

There are two ways you can use dynamic forms. The first way is if you have no additional controls other than those in the configuration.

 constructor( public formFactory: FormBuilderService ) {} ngOnInit(): void { /**  * Call formFactory service and pass form fields  * JSON configuration to create new form group  */ this.exampleForm = this.formFactory.createForm(this.exampleFields); /**  * Example how to add additional formControl  * to form ifyou need  */ this.exampleForm.addControl('id', new FormControl(1, Validators.required)); }

 <app-form-factory [form]="exampleForm" [fields]="exampleFields" ></app-form-factory>

If you want to insert dynamic fields into one control and add the rest of the field via the form builder, you can do so as follows.

 constructor( private fb: FormBuilder, public formFactory: FormBuilderService ) {} ngOnInit(): void { this.exampleForm = this.fb.group({ dynamic: this.formFactory.createForm(this.exampleFields), id: ['1', Validators.required], }); }

 <app-form-factory [form]="formFactory.getFormGroup(exampleForm,'dynamic')" [fields]="exampleFields" ></app-form-factory>

This system supports some form fields by default (see above). If you want to specify fields you would like to use you can do that in form-factory/core/services/form-builder.service.ts:

 private formFields: FieldTypeModel[] = [ { type: 'input', component: InputComponent, }, { type: 'textarea', component: TextareaComponent, }, ... ];

Note that if you want you can pass any form field you created like in example above.

type - Selector that you use for controlType option in JSON configuration.

component - Angular component

You can provide your own services using simple configuration.

First, you should create a Service configuration object. It contains following fields:

Example:

{ regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/, embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2', html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>", height: 300, width: 600, id: (groups) => groups.join('/embed/') }

When you create a Service configuration object, you can provide it with Tool`s configuration:

var editor = EditorJS({ ... tools: { ... embed: { class: Embed, config: { services: { youtube: true, coub: true, codepen: { regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/, embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2', html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>", height: 300, width: 600, id: (groups) => groups.join('/embed/') } } } }, }, ... });

Editor.js provides useful inline toolbar. You can allow it`s usage in the Embed Tool caption by providing inlineToolbar: true.

var editor = EditorJS({ ... tools: { ... embed: { class: Embed, inlineToolbar: true }, }, ... });

{ "type" : "embed", "data" : { "service" : "coub", "source" : "https://coub.com/view/1czcdf", "embed" : "https://coub.com/embed/1czcdf", "width" : 580, "height" : 320, "caption" : "My Life" } }

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.