Implementing Dynamic FormControl Values within FormGroup in Angular: A Step-by-Step Guide

GenerateFields(customControl, customValue): FormGroup {
    return this.fb.group({      
      customControl: new FormControl(customValue),
    })
  }

I am looking for a way to dynamically add the value of customControl from the parameter passed in the GenerateFields() method. How can I achieve this?

Currently, it always uses the key "customControl" instead of using the actual value that is passed to it.

Answer №1

To use formControl as your dynamic key, ensure to enclose it within square brackets [] or else you will retrieve its value.

BuildCustomFields(formControl, formControlValue): FormGroup {
debugger
return this.fb.group({
  
 [formControl]: new FormControl(formControlValue),
})

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

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

Error encountered when packaging WebAssembly using Rollup

When I use wasm-pack to compile some rust code into webassembly, specifically with the option --target browser (which is the default), these are the files that I see in typescript/deps/ed25519xp: ed25519xp_bg.wasm ed25519xp_bg.d.ts ed25519xp.d.ts ed25519 ...

The ng-change event is triggered for radio buttons that are generated using ng-repeat the first time they appear, but not for subsequent appearances

Is it possible to trigger the updateRow method on every change of a radio button selection? Currently, the updateRow method is only being called the first time the radio button changes. How can I make sure it executes each time there is a change? Html: ...

The function createReadStream completes execution without resolving

Currently, I am in the process of developing a program that is aimed at iterating through files within a specified directory in a Linux environment. I have implemented a custom function called "myReadFile" which returns a new promise, and it is expected ...

Using the data () method to define Chart.js annotations in Vue.js can cause them to malfunction

I've encountered an issue while incorporating chartjs-plugin-annotations into a Vue.js application We have successfully integrated ChartJS charts into our Vue applications by defining the chart's config within the data () section of the componen ...

Techniques for triggering JavaScript on elements that have been dynamically loaded via Ajax

When it comes to ensuring that a certain functionality works both when the document is ready and after an Ajax call, there are some considerations to keep in mind for optimal performance. An approach I found effective involves defining the desired code wi ...

Issue with Material UI scrollable tabs failing to render properly in Internet Explorer

Currently, we are integrating Material UI into our tab control for our React Web UI. Everything is functioning smoothly in Chrome, but when we attempted to test it in IE, the page failed to load and presented the error below: Unhandled promise rejection ...

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

I currently have a map with around 1000 polygons that I am loading onto it. My goal is to color these polygons based on a specific property value. The code snippet below showcases my approach, but the results are not as expected. mapLayerFieldGrid = new L ...

Display a hidden division when a radio button is selected using Javascript and Jquery

Currently, I am in the process of constructing a form that triggers a series of additional questions based on the selected answer. Below is my current working code snippet: $(".appliedWorked").click(function(){ if($(this).val()==="appliedWorkedYes") ...

Utilize jQuery to locate a specific value within a collapsible Bootstrap 4 table

Is it possible to use a Bootstrap 4 table inside a collapse? I need to search for a specific value in the table and if the value is found, I want to open the collapse and display the row containing that value. <div id="collapseStudents" class="collapse ...

Having difficulty executing JavaScript code from the VB code behind

Recently, I have encountered a strange issue while working with ASP/VB.net. In my code behind VB file, I am trying to call a JavaScript function, but it seems like nothing is happening. Surprisingly, I have used a very similar method on several other pages ...

How to bind array elements in Vue.js

I am currently working with an array that contains various arrays and properties within it. My goal is to iterate through the array and generate new rows for each item in it. Here is a snippet of what I have been working on: var orderDetails = [ ...

Unlock the power of Redux: Crafting specialized selectors with parameters

I am currently working with a state that contains a map array of data. I find myself needing to select a single object from this array. To achieve this, I can retrieve the entire array in my component using: function mapStateToProps (state) { return { ...

Display a div beside it when hovering over a specific part of the image

If I have an image that is 200px wide and 900px tall How can I make a div display alongside it when hovering over a specific section of the image? ...

The android() method could not be located on the root project 'xyz' of type org.gradle.api.Project when passing [before_plugins_] as arguments

Encountering an issue while attempting to run the Nativescript Android application on my device. The error message states: Could not find method android() for arguments [before_plugins_d5qrcua3za3scd760qug60fz6$_run_closure1@5754ca71] on root project &apos ...

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

Node.js is unable to handle the contents of an SNS event message

I am encountering an issue while attempting to extract content from a Message in an SNS event within a Node.js Lambda project Below is the code snippet for processing the message: exports.handler = (event, context, callback) => { var message = event. ...

Navigating production mode in nuxtjs and uncovering errors

There seem to be numerous inquiries regarding this matter. Unfortunately, there doesn't appear to be a definitive solution. Is there any way to view detailed error logs in production mode? https://i.stack.imgur.com/prXUt.jpg ...

What is the best way to establish a global constant that can be accessed by multiple controllers in AngularJS?

Imagine I need to create a constant variable that can be shared between controllers in Angularjs; $webroot = "localhost/webroot/app" After some research, it appears that services are the recommended approach. But which one should I use? Should I implemen ...