Angular formly form including various stages and intricate fields within each step

I have been assigned to a project that involves using formly to create various types of forms. Most of them are basic single page forms or forms generated from jsonSchema. My task is to explore nested forms with tabs, among other features.

Check out the progress here

Although it appears to be functional, there seems to be an issue with creating nested objects in the model. I am aiming for a structure like this:

{
   category1: {
      subcat1: {
         field1: 'value',
         field2: 'value'
      },
      subcat2: {
         field1: 'value',
         field2: 'value'
      }
   },
   category2: {
   ...
   }
}

Answer №1

To successfully implement this code snippet, you must include a FormGroup with a FormArray in the following manner...

  const myFormGroup = fb.group({
    id: [null],
    // Make sure to add default form controls here
    categoryList1: this.fb.group({
        list1: this.fb.array([
          this.fb.group({
            field1: [null], // Validations can be added here
            field2: [null]
          })
        ]),
        // Repeat for additional categories
    }),
    ...
});

You have the option to dynamically push values into the form as shown below...

this.categoryList.push(this.initializeCategoryGroup());

get categoryList() {
    return this.myFormGroup.get('categoryList1').get('list1') as FormArray;
}

initializeCategoryGroup() {
    return this.fb.group({
      field1: [null],
      field2: [null]
    })
}

I trust that this explanation proves beneficial for your requirements. :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to utilizing the spread operator within a typescript tuple

Is it possible to set the structure of an array without knowing the exact number of elements it will contain? How can I achieve this flexibility in defining array configurations? (Check out a playground version here): type numStrArr = [number, ...string]; ...

Arranging JSON objects based on the key (Index) value in PowerShell

I want to arrange the JSON objects below based on the "Index" key value. JSON = { "PIPoint": { "Label": "\"PIPoint\"", "Visible&quo ...

Creating a navigational sidebar with dynamic responses using Angular 8

Currently, I am working on creating a responsive sidenav USING ANGULAR WITHOUT MATERIAL DESIGN. My goal is to achieve the same level of responsiveness that can be seen on https://angular.io. Within my project, I have created separate components for the top ...

Utilizing ExpressJS in a NodeJS application with ES6 and Typescript

After confirming my information, I discovered that in an ES6 application, it is necessary to import dependencies using import .. from '..' instead of var .. = require('..'). I made the necessary changes to the imports, but encountered ...

Determining whether a Typescript AST node represents a javascript native function

How can I determine if an AST node in TypeScript represents a valid JavaScript function, as opposed to a custom method? Here's what I'm thinking: function isJavascriptFunction(node: ts.Node): boolean { // ----- } For instance, given the cod ...

Tips for invoking a function from one React component to another component

Currently, I am working on two components: one is Game and the other is PickWinner. The Game component serves as the parent component, from which I need to call the pickWinner function in the PickWinner component. Specifically, I want to trigger the startP ...

Tips for evaluating the stickiness of a block within a cell when it adheres to a mat-header-cell

I am working with an Angular table and facing an issue. How can I make the span element in the cells of the first column stick to the sticky mat-header-row when scrolling down the table? My requirement is for the span element to stay attached to the lower ...

the PHP variable does not seem to be displaying on Android when using JSON

I am currently working on developing an Android app that involves utilizing fuzzy calculations (although I have not yet completed the entire fuzzy calculation process). The calculations will be executed in PHP. As a starting point, I began by creating a si ...

What is the process for installing npm dependencies to a specific directory without creating a node_modules folder?

I recently published a package called main-package, which has a dependency on another package called sub-package that is already available on npm. However, when I install main-package, it creates a node_modules folder with both packages at the same level. ...

A beginner's guide to serializing a dictionary in Django for use in Jquery

How can I serialize the dictionary form.errors? For example, in the view we have: form = PersonalForm(request.POST) # errors = serializing function which serializes form.errors data = errors #Is this the way to pass data? Not quite sure.... return HttpR ...

Python occasionally struggles with properly parsing JSON data

Retrieving this information from a JSON object: The API call is executed at this point: response = make_request(GET_QUALIFIED_OFFERS_URL, request) def make_request(url, json_data): host = url req = urllib2.Request(host, json_data, {'content ...

Ways to handle JSON deserialization in .NET without a specific type definition

Take a look at this link: This URL is part of StackOverflow's API. The JSON it returns is quite intricate, and I am interested in transforming it into an object that can be utilized in my ASP.NET MVC view. The issue lies in the fact that the JavaScr ...

Create a PDF document utilizing Angular Ignite UI for Angular

Currently working with Angular TypeScript 12, I have successfully integrated Angular Ignite UI grid. However, I am in need of a way to export my grid into a PDF format using Igx-Grid. Does Igx-Grid support PDF exporting? If not, are there any alternative ...

The login option failed to redirect users to their dashboard

I am encountering an issue with the login services. The password check works fine, but there seems to be a problem with the navigation router not functioning correctly. I feel like I might be overlooking something specific, can you please help me pinpoint ...

Steps for sorting items from a list within the past 12 hours

I'm currently working with Angular and I have data in JSON format. My goal is to filter out items from the last 12 hours based on the "LastSeen" field of the data starting from the current date and time. This is a snippet of my data: { "Prod ...

The validation for minItems in the JSON schema does not appear to be working as expected

Currently, I am developing a JSON schema that includes the use of minItems to verify the number of items in an array. The structure of my schema is shown below: { "title": "Custom Schema", "type": "object", "properties": { "root": { "type": "a ...

Decompressing GZIP content of HTTP request in Java that is stored in a

We are currently utilizing packetbeat, a network packet analysis tool, to capture http requests and responses in json format. However, an issue arises when the server supports gzip compression as packetbeat is unable to unzip the content and simply saves t ...

Tips for creating a versatile key pair in TypeScript with a generic "type"

I need to create a key value pair type for flat objects, but I keep encountering an error when using it in a global s type file. // 1. currently using this type KEY_VALUES = { [k: string | number]: any; }; // 2. I thought it should be like this type KEY_V ...

Connect multiple tables in JSON format

I'm encountering an issue while trying to display data from a JSON file. When I attempt to show the data in a single table, everything works fine. However, if I try to join multiple tables, no data is displayed. <?php mysql_connect($hostname,$user ...

Steps for importing a JSON file into Google Colab

I'm having trouble reading the files in Google Colab. I need to read the file as a simple JSON, but when I try to do json.dumps(file), I keep getting numerous errors. Here is the code for uploading the file: import json import csv from google.cola ...