This project was generated with Angular CLI version 13.0.3.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

In our day to day life we come across various forms on various web and mobile applications. As a developer while developing these forms it becomes difficulty to functionalise these form to work properly when there are n number of business logic need to be added in it. When we are going through the native way of developing these forms need to manually handel what kind of input need to be accepted, add various validations, change form view or controls according to certain value selections in the form and so on. If you are using Angular 2+ framework for developing the web application or mobile hybrid app and their is a very tight deadlines to develop the application which containes very big forms and with heavy amount for validation and business logic init in this scenario we can use angular-formio package.

What is angular-formio?

Angular-formio package provides an easy way to develop forms in the angular web or hybrid app. There is not much required of writing a code to develope any kind of complex form. It provides drag and drop feature to develope the forms and then render the developed form on the web application. So it containes two part Form Builder and Form Render.

What is formbuilder & formrender? Formbuilder: As the name suggest that using formbuilder we can create forms on the application. Here we are having various form controls using which we can drag these controls on the form and develop the entire form. If any kind of control is not there which we required, in this scenario we can develop our own custome form control and add it in the controls list. When we develop form on the builder a json is created which containes all the information of the developed form. This json can be used to render the form on the render.

Formrender: After creating the form using form builder now we need to render form on our angular application. By using json generated by the form buider we can pass that json to form render and render the form on our application. By default Formio render uses bootstarp frameworkf for form controls design, but formio have provided provision to customise form control design which we will seeing futher implimentation.

Advantages: 1) Easily form can be developed. 2) Any kind of form validation can be added. 3) Non software developer can also update the form with some amount of traning. 4) If the form is updated, no any kind of build release required. 5) One form design can be used in multiple applications such as if same form is required on web application and on hybrid mobile app no multiple development is required only one single form design can be used in multiple platform. 6) Time of developement is less than native development.

Disadvantages: 1) Increases in project package size. 2) Comparing to native performance will be less. 3) Performing async validation is difficulty 4) Handling some criticle scenarios might require more time.

Render: Adding pre added data Events in render Adding data to controls.

Advantages Disadvantages