Obtaining distinct form control values for replicated form fields with Angular

Issue with Dynamic Form Duplicates:

I am currently working with a reactive form that has two fields - name and value. There is an add button that duplicates the form by copying these fields. The challenge I am facing is with updating the values of the duplicated forms correctly.

Problem Description:

When I duplicate the form and enter new values for the value field, the respective popup button displays all the values entered so far in any version of the form. This creates confusion as only the input related to that specific duplicated form should appear in the popup.

If anyone can provide insights or solutions on how to resolve this issue, it would be greatly appreciated. Please feel free to leave comments below if further clarification is needed.

Demo Code: View Demo

Credit Note: Majority of the code in the provided link was created by user @VimalPatel on StackOverflow. Credit goes to him for his contribution.

During my testing, I encountered difficulty installing Boostrap in the sandbox code. Hence, I replaced the popup feature with a show button to display the values received from the forms.

javascriptangulartypescriptformsangular-reactive-forms

Answer №1

To handle a form containing a FormArray, create a variable of type FormGroup. This variable will store the currently selected form. When a button is clicked, pass the current form as an argument to the show method.

<button (click)="openForm(form)">Show</button>
 
openForm(form: FormGroup) {
     this.selectedFormGroup = form;
}

To display the selected form value in your template, use the following code.

<div *ngIf="selectedFormGroup">
    {{selectedFormGroup.value | json}}
</div>

Check out the Working CodeSandBox for reference:

https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html

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

Nested validation schema featuring conditional validation - yes, we've got it covered!

In my Formik object, I have set initial values as follows: {customerDetails: {id: "", name: "", mobileNumber: ""}, notes: {id: "", text: "", type: ""}} How can I create a conditional Yup validati ...

reactjstypescriptformikyup

How to retrieve the total count of dynamically inserted list items within an unordered list in Angular

Is there a way to calculate the number of dynamically added list items within a ul element? I need this information to adjust the width of a queue element based on the number of list items with a formula like [style.width.px]="numberOfLi * 50". Any sugge ...

angular

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time. This is my current setup: <div class="background"& ...

javascripthtmlcsshoverbackground-image

Status and route redirection in Vue instance management

I am looking to establish a global status property for my application using vue.js and vue-router. This property should be shared between components and used to control access to certain routes based on its value. For instance, I want to redirect all rout ...

javascriptvue.jsvue-router

Using NextJS to execute a Typescript script on the server

I am working on a NextJS/Typescript project where I need to implement a CLI script for processing files on the server. However, I am facing difficulties in getting the script to run successfully. Here is an example of the script src/cli.ts: console.log(" ...

typescriptnext.jsts-node

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

Is it false to say that false in Javascript is still false?

After conducting some research, it appears that the question I have in mind has not been asked before, or maybe it has slipped under my radar. A rational approach would be to consider the following logic: false && false === true false && true === false t ...

javascriptoperatorsboolean-logic

Bug in Chrome causing issues with autofilling fields in AngularJS applications

Seeking a solution to address a bug noticed while utilizing a custom Angular directive in conjunction with Chrome's autofill feature. The directive is designed for a phone number field, automatically adding dashes "-" to enhance user experience by eli ...

javascriptangularjsgoogle-chrome

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

javascriptreactjstypescriptreact-nativeyup

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

htmlcssreactjstypescriptantd

Utilizing jQuery to dynamically add results and prevent duplicate entries in will_paginate

I am currently using will_paginate to easily manage the comments pagination in my Rails 3 application, and so far it's been working flawlessly. At the moment, I have set up the display to show 10 comments per page. However, whenever I add a new comme ...

javascriptjqueryruby-on-railsajaxwill-paginate

Revamp your Angular projects with a sleek ng-select component design inspired by Bootstrap v5's form-select,

The problem arises from the fact that the @ng-select/ng-select library does not offer native support for the floating label style in Bootstrap 5. ...

angularsassbootstrap-5angular-ngselect

Is there a way to identify modifications in an Object and an Array when utilized as Input attributes in a sub-component?

After exploring the following two questions, I found that there weren't any helpful answers: Detect change in object of input array Detect changes in component input when it is a object In my current scenario, I am faced with the need to pass variou ...

angular

Issue encountered: React module not detected while attempting to execute npm start command

While developing my react app, I encountered an issue when trying to run 'npm start'. The application was working as expected until I faced a bug that prompted me to update my node version for a potential fix. After upgrading to node v16.13.2 and ...

javascriptnode.jsreactjsnpmnode-modules

Specify the versions of packages in your package.json file

My package.json file contains many dependencies with "*" as the version, which I have learned is not recommended. I want to update them all to their latest versions. Despite using npm-check-updates tool, it indicates that all packages are up-to-date. Can ...

javascriptnode.jsnpmnpm-install

Building Background Service Workers with React Scripts and webpack Configuration

I am currently developing a chrome extension using ReactJS and TS along with a service worker. Due to the new manifest V3 requirements, I am required to specify my service worker in a specific way: "background": { "service_worker": &q ...

reactjstypescriptgoogle-chromewebpackgoogle-chrome-extension

jQuery eliminates initial div just a single time

Here is a function I have created: function removeDiv() { var topmost = jQuery('.xx'); var totContent = topmost.find('.zz').length; var $target = jQuery('.xx').find('.zz').eq(0); if(totCont ...

javascriptjqueryajax

Employing global variables in JavaScript files with Vue3

In my Vue3 project, I have defined global variables like this: app.config.globalproperties.$locale = locale A composable function has been created to dynamically retrieve these global variables: import { getCurrentInstance ) from 'vue' export f ...

javascriptvue.jsglobal-variablesvuejs3vue-composition-api

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

Looking for an easy method to identify all JavaScript events linked to a specific HTML element in Chrome? For example: HTML element <a href="#" class="cancel_link refresh_page">Cancel</a> Script: <script type="text/javascript"> $ ...

javascriptjqueryhtmlgoogle-chrome