Utilizing Angular Reactive Form to enable a predetermined number of prepopulated form array controls

Embarking on a project involving Angular and the Reactive forms builder.

Check out this StackBlitz example

In this endeavor, I am working with prepopulated forms using form.array to construct a dynamic list of controls based on provided data. Initially, the fields are disabled to maintain read-only status. However, I face a challenge in enabling these dynamically generated controls without specifying each control's index value.

ts file

 // TypeScript logic goes here

Within this section, I shall create and manipulate form controls based on fetched data dynamically.

html file

<!-- HTML structure goes here -->

The primary goal is to activate specific form controls within the array dynamically.

Here is the updated StackBlitz example for reference

javascriptangulartypescriptangular-reactive-forms

Answer №1

It seems like you have successfully enabled the "type" but are facing issues with enabling name/description/code.

Just a friendly reminder that your main FormGroup does not directly contain name/description/code - it actually contains another FormGroup named items, which houses all your controls. To access these form controls, you will first need to fetch the sub-form group from the main form.

Here's a revised version of the enable function:

enable() {
  this.isOwner = true;
  this.form.get('type').enable({ onlySelf: true });
  let items = this.form.get('items') as FormArray;
  items.controls.forEach(control => {
    control.enable({onlySelf: true});
  })

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

Set the Checkbox selections by utilizing the array values in the MUI DataGrid

In my MUI Datagrid, I have 2 columns for ID and City Name. There are only 3 cities represented in the table. Within a citizen object like this: const userMockup = { id: 1, name: "Citizen 1", cities: [1, 2], isAlive: true }; The cities ar ...

javascriptreactjscheckboxmaterial-uidatagrid

Is it possible to display Google pie charts when clicking on text or an image?

Having trouble setting up a link that triggers an onClick() action to generate a Google pie chart? Check out this example on JSFiddle. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="piech ...

javascriptphpgoogle-pie-chart

I am encountering an error with setTimeout(): Timeout { _called: false }

I have been experimenting with creating a function that generates a random number and then adds 5 to it after a 3-second delay This is what I have attempted: const add5 = (randomNum) => { return randomNum + 5 } // Function for you to get start ...

javascript

React.js encountered an error: Objects cannot be used as a React child (found: object containing keys {type, data})

My current project involves displaying MySQL data in a table using Node.js and React.js. However, I keep encountering the following error: Error: Objects are not valid as a React child (found: object with keys {type, data}). If you meant to render a colle ...

javascriptnode.jsreactjs

Struggling with updating state using splice method within an onClick event in React Hooks

CODE DEMO I'm facing an issue with my code snippet where it appears fine when I console.log it, but fails to set the state. The goal is to delete a box by using splice when clicked, however, something seems to be preventing it from working properly. ...

javascriptreactjsreact-hooksslice

How to pass parameters from a directive to a child component in Angular

I am currently attempting to create a child component that can pass parameters using a directive, but I have not been able to find any tutorials on how to achieve this yet. I have tried looking at some resources, such as this one on Stack Overflow: Get re ...

angulartypescript

How do I properly utilize ngIf in Angular2 to display text exclusively when there is no data retrieved from the server?

After retrieving data from the server using ngFor to display it as a search feature, I want to show a message saying 'There's no result' when there are no search results. How can I achieve this? I have attempted the following approach, but ...

angularangular-ng-if

What is the best way to reference an object within the Vue data as the value of an item?

If I wanted to incorporate the {{ $t('index-p1') }} value within the title property, how would I do so? items: [ { icon: 'mdi-apps', title: 'Welcome', to: '/' }, For int ...

javascriptvue.jsvuejs2vue-i18n

Utilizing Three.js for onWindowResize event parameterization

As I delve into the world of JavaScript coding and experiment with Three.js, I've come across a function that dynamically scales my scene based on the size of the browser window: function onWindowResize() { camera.aspect = window.innerWidth / wi ...

javascriptthree.js

Are JQuery functions affected when navigating between pages in smart-tables?

Apologies if this question has been answered before or seems obvious. I couldn't find a solution after searching, and as someone new to web development, I might be going in circles here. Issue: I've integrated the smart-table extension () into ...

javascriptjqueryhtmlangularjssmart-table

Guide to filtering mongoose results with lodash

I am looking to display only the partners that a user is assigned to. Below is a list of partners: { "_id" : ObjectId("57c1cfa16c9cdc9007b26f8a"), "__t" : "Partner", "createdAt" : ISODate("2016-08-27T17:36:33.648+0000"), ...

javascriptnode.jslodashmeanjs

What is the best way to send variables to a proxy server URL?

Is there a way to pass specific variables to my proxy in order to make API calls with customized parameters, similar to the scenario outlined below? This is how my proxy configuration appears: { "/darksky/*": { "target": "https://api.darksky.net/ ...

angulartypescriptproxy-server

Take the attention away from the canvas

Is there a way to shift focus away from the canvas and onto input fields in my HTML code? Right now, the canvas is holding onto focus even when I'm clicking on text inputs. This prevents me from typing anything into them. Ideally, I'd like for t ...

javascripthtmlcanvasfocushtml-input

Switch Focus and Collapse Submenus upon Menu Click in Recursive React Menu

I've created a dynamic menu system in React using Material-UI that supports recursion for submenus. I'm aiming to implement the following features: 1. When a menu item is clicked, all other open submenus should close and focus on the clicked men ...

javascriptreactjsmaterial-ui

The edges of shapes created with ThreeJs appear to have a fuzzy or blurred outline

Trying to create a cube in ThreeJs using Box Geometry, but encountering strange and shaky lines. Even setting wireframe to false doesn't resolve the issue, as the edges remain problematic. https://i.sstatic.net/sUPAX.png Currently utilizing WebGlRen ...

javascriptthree.js

The Ionic framework is showing an error that says "'LoginCtrl' is not defined as a function."

I encountered an issue while attempting to set up simple navigation in my ionic application. The error message I received was: "Argument 'LoginCtrl' is not a function, got undefined in the Ionic. What could be causing this problem?" Here is a sn ...

javascriptangularjscordovaionic-framework

Is the angular controller as syntax still necessary, or is $scope only needed for special occasions?

I have implemented angular's 'controller as somename' syntax. Consider the following function as my controller: function myCOntroller($scope) { $scope.$emit('event'); } The above function is functioning properly. I attempted t ...

javascriptangularjsangularjs-scope

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

cssangular

Incorporating a Symbol into a Function

Reviewing the following code snippet: namespace Add { type AddType = { (x: number, y: number): number; }; const add: AddType = (x: number, y: number) => { return x + y; }; } Can a 'unique symbol' be added to the AddType lik ...

typescript

Mastering the art of crafting form elements with jQuery

My code is looking like this: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function afterText() { var textElement = document.create ...

javascriptjquerydomcreateelementjquery-attributes