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

Removing unnecessary keys from intricate JSON data (with the use of pure JavaScript)

Error: The function 'check' is not defined and cannot be called when the 'on

Why does my Javascript cross-domain web request keep failing with a Status=0 error code?

Executing an AngularJS function through CasperJS is a common task that can

Utilizing Visuals from a Vue Component Collection

`Check out Vue3's property watching feature`

Modify the view to display the router outlet as a sidebar

Is it possible to integrate two calendars into the `DatePicker` component of MUI?

Is it possible for me to customize the default angular filter in order to prioritize displaying strings that begin with the search term?

I'm experiencing issues with my Ionic application Dockerize not properly functioning in the browser

invoke a managed bean to execute JavaScript code

Click to expand for answers to commonly asked questions

Redirecting and styling following an HTTP post operation

Unable to establish a connection with the server data in pusher.js

Issue with Submit Event in React - Enter Key Fails to Trigger

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

When using JSON stringify, double quotes are automatically added around any float type data

What could be causing the Twitter Timeline to fail to load based on a variable in a Vue.js component?

Create an array in JSON format that includes a JavaScript variable, with the variable's value changing each time a mouse

Executing a JS function within a table cell