Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

Question

Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

In our development team, we are currently diving into several Angular2< projects. While my colleagues are comfortable coding large forms directly with Typescript and HTML in our Angular 2< projects, I am not completely satisfied with this method.

We are about to embark on new projects that will require extensive form structures, possibly with conditional logic, and these projects are expected to expand over the next few years. I believe that writing the code directly in Typescript/HTML, even with separate components and services, will result in a significant amount of redundant code. Any changes or additions to the forms in the future would be very cumbersome.

Is there any visual form editor available for AngularJS 2 that supports complex form structures? Or perhaps a form engine that offers a GUI, generator, or centralized configuration for creating intricate form layouts?

I simply want to develop advanced form structures in Angular2< without unnecessary coding complexities.

javascript angular forms typescript

Answer 1

Answer №1

Lately, I completed a project involving an angular application with a form that has over 50 fields. My recommendation is to break it down into smaller components and pass the form instance to child components. You can divide it into sections like basic information and social media, each having its own component. Any updates, such as adding or removing fields, can be handled by passing data back to the parent component using @Input and @Output() decorators, which then updates the changes locally and remotely (via HttpClient).

 form = this.fb.group({
    basic: this.fb.group({
      name: '',
      description: ''
    }),
    social_media: this.fb.array([
      this.createSocialMedia({ sm_id: 1, sm_name: 'facebook' }),
      this.createSocialMedia({ sm_id: 3, sm_name: 'instagram' }),
    ])
  })

Parent template:

<div>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <app-basic
          [parent]="form">
        </app-basic>
        <app-social-media
          [parent]="form"
          [media]="social_media"
          (added)="addSocialMedia($event)">
        </app-social-media>
     </form>

Child component template for basic:

<div [formGroup]="parent">
      <div formGroupName="basic">
        <input 
          type="text" 
          placeholder="Name"
          formControlName="name">
        <input 
          type="text" 
          placeholder="Description"
          formControlName="description">
      </div>
    </div>

If you want to introduce a new feature, like billing information, all you have to do is add

billing: this.fb.group({...//billing details})

to your existing form. Then, include

<app-billing></app-billing>

in the parent template and create the template for the billing section.

Answer 2

Lately, I completed a project involving an angular application with a form that has over 50 fields. My recommendation is to break it down into smaller components and pass the form instance to child components. You can divide it into sections like basic information and social media, each having its own component. Any updates, such as adding or removing fields, can be handled by passing data back to the parent component using @Input and @Output() decorators, which then updates the changes locally and remotely (via HttpClient).

 form = this.fb.group({
    basic: this.fb.group({
      name: '',
      description: ''
    }),
    social_media: this.fb.array([
      this.createSocialMedia({ sm_id: 1, sm_name: 'facebook' }),
      this.createSocialMedia({ sm_id: 3, sm_name: 'instagram' }),
    ])
  })

Parent template:

<div>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <app-basic
          [parent]="form">
        </app-basic>
        <app-social-media
          [parent]="form"
          [media]="social_media"
          (added)="addSocialMedia($event)">
        </app-social-media>
     </form>

Child component template for basic:

<div [formGroup]="parent">
      <div formGroupName="basic">
        <input 
          type="text" 
          placeholder="Name"
          formControlName="name">
        <input 
          type="text" 
          placeholder="Description"
          formControlName="description">
      </div>
    </div>

If you want to introduce a new feature, like billing information, all you have to do is add

billing: this.fb.group({...//billing details})

to your existing form. Then, include

<app-billing></app-billing>

in the parent template and create the template for the billing section.

Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

Answer №1

Similar questions

Tips for utilizing the setInterval function in javascript to update the background color of the body

Unusual hue in the backdrop of a daisyui modal

Fixing the Timeout Error in Node.js & Mongoose: A Step-by-Step Guide

Creating a String-only pattern Validator: A step-by-step guide

Using the splice method on an array is only effective when done in a specific sequence

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

Comparing TypeScript and C++ in terms of defining class reference member variables

Launching event handlers and applying CSS classes within a single scenario

Configuring Chart.js in Laravel to Initialize with Value of Zero

offspring of offspring in jquery animation remains stationary

The validation process is still failing even though the correct credentials have been entered

Gather data from a variety of HTML5 video seminars

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

Utilize the fitBounds feature from GoogleMaps in Vuejs for seamless integration

What's the process for converting offsetX and offsetY pixel coordinates to percentages?

Creating a Circle with Pixi.js v4 and Typerscript in IONIC 2

Issues with transferring object data from JavaScript to a Web API

Why is Component scope not binding in AngularJS?

Revamp the HTML page by automatically refreshing labels upon every Get request

Tips for choosing a single row in a table using a checkbox