formql / formql

FormQL - A framework for building dynamic forms in Angular

FormQL is a framework for building dynamic forms in Angular. It comes with an editor that offers a drag and drop functionality to make it easier for non technical users to maintain the forms as well as an extensible APIs for allowing developers to extend the functionality with custom components.

FormQL comes with the following features:

• CSS grid templating: define the structure of your form with CSS grid standards.
• Dynamic validation: add rules to dynamically make fields mandatory, read only or hidden.
• Calculated fields: add logic to perform calculation based on the values in other fields.
• Field formatting with Text-Mask: includes the ability to format fields such as currencies and dates.
• Extensible: ability to extend the forms with your own custom components.

Demo

• Formql.io: https://formql.io/example/#/form/contactInfo/edit
• Stackblitz: https://stackblitz.com/edit/formql-example-material

Stackblitz Demos (also avaiable in ./examples in this repo)

• https://stackblitz.com/@formqlx

Documentation

https://github.com/formql/formql/wiki

Libraries

Core libraries

• @formql/core
• @formql/editor

Bundles

• @formql/material

How to run this repo

git clone https://github.com/formql/formql.git
cd formql
npm install
npm start

• Edit mode: http://localhost:4200/#/form/contactInfo/edit
• View mode: http://localhost:4200/#/form/contactInfo

Contact us

• Website - https://formql.io
• Twitter - @formql_io

License

FormQL is MIT licensed.

formql's Issues

Console throws an error when changing components in FormQL editor

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• What is the current behavior?
  Changing components in FormQL Editor throws an error if the target components has actions and the previous doesn't implement actions.
  E.g. Moving from FormQLCheckboxComponent to FormQLButtonComponent
  

• What is the expected behavior?
  Not expecting any error in the console

• Please tell us about your environment:
  Windows

  • Version: 0.3.1
  • Browser: Chrome

Implement rules for sections

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• What is the current behavior?
  Implement rules for sections in the same way as in components

• What is the expected behavior?
  Add the ability to hide or make sections read only based on rules

• What is the motivation / use case for changing the behavior?
  New functionality to the framework

• Please tell us about your environment:
  N/A

Runtime dynamic forms from GraphQL schemas

Hi Juan,

Thanks for your great work on this so far!

I'd like to propose a new feature where you could add a list of forms/layouts for all queries/mutations in a GraphQL introspection schema simply by providing a uri to the schema.

These dynamic forms would be ready for immediate use by being data-bound and having the basic validations already in place. As such they would serve primarily two use cases:

1. In many projects users (or often us the developers) have to perform simple CRUD operations directly against databases and so on many iterations into development. A reasonably user-friendly way of manipulating backend data using these dynamic forms would prevent this.
2. Starting the design-work on basic but already working forms and manipulating these using the editor considerably lowers the complexity and effort to create a large number of forms.

There are many interesting challenges to solve here, for example:
*matching of queries and mutations to forms
*managing which forms (dynamic vs customized) should be available to "viewers".

I would be happy to try and do some work on this if you think FormQL is the right place for it?

[Question] Why do you provide "NG_VALUE_ACCESSOR" two times everytime?

Hey Juan,

what is the reason behind the double providing ? I dont understand.

formql/packages/core/src/bundle/formql-label.component.ts

Line 21 in 6804700

}]

Field is not read only when form loads

• I'm submitting a ...

  • bug report

• What is the current behavior?
  There is a new field called "Full Name" in the start up example for the repo (simple running npm start in formql repo), that field should be read only but it only becomes read only when making a change in the form

• What is the expected behavior?
  Full Name field should be read only at all time

• Please tell us about your environment:

  • Version: 0.3.5
  • Browser: [all]

ERROR Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?

Hi!

I'm probably making something bad, but I can't make the componentn work.

I'm getting an error: No component factory found for undefined. Did you add it to @NgModule.entryComponents.

I am preparing a public report to illustrate the issue.

Thanks in advance.

I'm using the example to start with formql but it doesn't display the values ​​in the browser with redux

I can't see the content of variables with redux, as redux doesn't work with ngrx 7, only with previous versions, is this correct?

FormQL editor doesn't work in Safari

• I'm submitting a ...

  • [X ] bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• What is the current behavior?
  FormQL Editor Drag and drop functionality doesn't work in Safari

• Please tell us about your environment:
  MacOS

  • Version: 0.3.2
  • Browser: Safari