Implementing dynamic Angular form group array with conditional visibility toggling

Question

Implementing dynamic Angular form group array with conditional visibility toggling

Within my angular application, I am faced with the task of implementing a complex form. Users should be able to dynamically add, remove, and modify elements within the form.

Each element consists of a group of inputs, where some are conditionally hidden or visible based on the selection of dropdowns within the group. These conditional groups may have varying quantities of fields, with some being required and others not.

No new array element can be added until all visible fields are validated. Additionally, the entire form needs to be easily serialized and deserialized for backend storage.

I believe that utilizing form arrays is the way to go. I have explored some third-party libraries like ng dynamic forms, but I am still unsure how to achieve what I require. Any suggestions on how I can implement this?

https://i.sstatic.net/HKlEx.png

The form is intended for adding, editing, and removing the following objects:

tasks": [
        {
            "uuid": "4e7e6737-8557-4a05-bb78-808f8a10daa4",
            "created": "2018-12-17T15:19:07.328408+01:00",
            "title": "TITLE (first input)",
            "modified": "2018-12-17T15:19:07.328440+01:00",
            "task_type": "SEND_EMAIL",
            "time_value": 2,
            "time_unit": "DAYS",
            "time_dir": "BEFORE",
            "process": "5f185517-40df-43e8-b677-3cf929b21638",
            "config": {
                "uuid": "b21f4cdf-22ba-42cd-81fa-7e7f1f84e6d1",
                "created": "2018-12-17T15:20:25.350927+01:00",
                "modified": "2018-12-17T15:20:25.350948+01:00",
                "email_title": "Email title",
                "email_from_address": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d3ced7dbc6dad3f6d3ced7dbc6dad398d5d9db">[email protected]</a>",
                "email_from_name": "Hello",
                "email_content": "Email body",
            }
        }
    ],

The dropdown options for the task type include:

"SEND EMAIL" - displaying fields such as "Email title", "Email from", "Email content" when selected.
"CREATE EVENT" - displaying fields like "Event date and time", "Event duration" when selected.

During deserialization of the form, each task's "config" object will contain specific fields based on the selected type.

angular typescript angular-reactive-forms

Answer 1

Answer №1

One way to simplify the process is by using an array of formGroups. Each formGroup should contain all the fields, regardless of the value of the "dropdown".

It may seem that when creating a form like this:

<form [formGroup]="form">

The variable "form" must be a FormGroup, but it can actually be a FormArray.

Therefore, a complete example could look like this, check out stackblitz

<form [formGroup]="form">
    <div *ngFor="let controls of form.controls;let i=index;let last=last" 
            [formGroupName]="i">
        <input formControlName="field1">
        <input formControlName="field2">
        <button type="button" *ngIf="last" 
            [disabled]="!form.controls[i].valid" (click)="addLine()">
            Add
        </button>
    </div>
  </form>
  {{form?.value|json}}

Whenever we have a FormArray, it is useful to have a function that accepts data or null and returns a FormGroup. Similarly, when we have a Form, a function that takes data and returns the form is beneficial.

  export class AppComponent implements OnInit  {
      form:FormArray;  //Note that our Form is directly a FormArray

      constructor(private fb:FormBuilder){}
      ngOnInit()
      {
        this.form=this.createForm(null); //Initially create an empty form
      }

      createForm(data:any[]):FormArray
      {
         //controls is an array of FormGroup
         let controls:FormGroup[]=
            data?data.map(x=>this.createLineArray(x))
                :[this.createLineArray(null)];
         return this.fb.array(controls);
      }

      createLineArray(data:any):FormGroup
      {
          return this.fb.group({
            field1:[data && data.field2?data.field2:null,Validators.required],
            field2:[data && data.field1?data.field1:null,Validators.required]
          })
      }

      //addLine simply pushes a new line in the array
      addLine()
      {
        this.form.push(this.createLineArray(null));
      }

Answer 2

One way to simplify the process is by using an array of formGroups. Each formGroup should contain all the fields, regardless of the value of the "dropdown".

It may seem that when creating a form like this:

<form [formGroup]="form">

The variable "form" must be a FormGroup, but it can actually be a FormArray.

Therefore, a complete example could look like this, check out stackblitz

<form [formGroup]="form">
    <div *ngFor="let controls of form.controls;let i=index;let last=last" 
            [formGroupName]="i">
        <input formControlName="field1">
        <input formControlName="field2">
        <button type="button" *ngIf="last" 
            [disabled]="!form.controls[i].valid" (click)="addLine()">
            Add
        </button>
    </div>
  </form>
  {{form?.value|json}}

Whenever we have a FormArray, it is useful to have a function that accepts data or null and returns a FormGroup. Similarly, when we have a Form, a function that takes data and returns the form is beneficial.

  export class AppComponent implements OnInit  {
      form:FormArray;  //Note that our Form is directly a FormArray

      constructor(private fb:FormBuilder){}
      ngOnInit()
      {
        this.form=this.createForm(null); //Initially create an empty form
      }

      createForm(data:any[]):FormArray
      {
         //controls is an array of FormGroup
         let controls:FormGroup[]=
            data?data.map(x=>this.createLineArray(x))
                :[this.createLineArray(null)];
         return this.fb.array(controls);
      }

      createLineArray(data:any):FormGroup
      {
          return this.fb.group({
            field1:[data && data.field2?data.field2:null,Validators.required],
            field2:[data && data.field1?data.field1:null,Validators.required]
          })
      }

      //addLine simply pushes a new line in the array
      addLine()
      {
        this.form.push(this.createLineArray(null));
      }

Implementing dynamic Angular form group array with conditional visibility toggling

Answer №1

Similar questions

Run JavaScript code whenever the table is modified

Modify the MUI time picker to display as a digital clock inside a DateTimePicker widget

What is causing the WebMvc ProfileController to be visible and disrupting the functionality of my static website?

Steps for confirming a property setting on an interface

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

From HTML to Mat Table: Transforming tables for Angular

Troubleshooting: Custom HTML Attribute in Angular 8 Component HTML Not Functioning as Expected

Problem: Unable to locate the TypeScript declaration file

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

Angular 2 integration for Oauth 2 popup authorization

How can I access a service without the need to import its provider module?

Tab order in Angular Forms can be adjusted

Having trouble locating the Nativescript-theme-core file for your Nativescript application?

Unable to connect to the directive even after adding it as an input

Querying Cloud Firestore with User ID

Is there a substitute for useState in a Next.js server component?

Implementing automatic selection for MUI toggle buttons with dynamic data

Is it possible for me to exclude generic parameters when they can be inferred from another source?

Tips for retrieving data sent through Nextjs Api routing

Syncfusion Angular TreeGrid Hierarchy connectors and lines for improved data visualization