Displaying the information of one formgroup inside another formarray

Utilizing the angular reactive forms module to connect to various formgroups within a formarray named "days." This information is displayed in a material drag and drop loop in the template. Upon clicking a button on the loop divs, details about the specific day should appear in a bootstrap modal. When selecting one day, the details show correctly. However, upon selecting another day, it displays data from the previously selected day.

The template has been properly configured with all necessary properties, including FormGroup, formarrayname, formGroupName, and formcontrolname. The HTML for the day modal is structured as follows:

 HTML code goes here

Using a manually set index variable to store the index used in the formGroupName. The component.ts code for setting the variable looks like this:

 TypeScript code goes here

The openDayModal() function is invoked in the template within this section:

 Template code goes here
javascriptangulartypescriptangular-materialangular-reactive-forms

Answer №1

It appears that there is a "bug" when modifying the selectedFitnessDayIndex, as it does not seem to bind correctly within a formGroupName.

   [formGroupName]="selectedFitnessDayIndex"

In your code, you are storing the formGroup in the variable selectedFitnessDay

  openDayModal(dayIndex: number){
    this.selectedFitnessDay = this.getDays().value.at(dayIndex);
    this.selectedFitnessDayIndex = dayIndex as FormGroup; //<--this line
  }

You can directly use

  //replace in your model  
  <form class="modal-body" [formGroup]="WorkoutForm">
      <div class="day-form" formArrayName="days">
        <div *ngIf="this.selectedFitnessDayIndex >= 0" class="specific-day-form" [formGroupName]="selectedFitnessDayIndex">
            ...this code is the same..
        </div>
      </div>
  </form>

  //by
  <form *ngIf="selectedFitnessDay" [formGroup]="selectedFitnessDay">
         ...this code is the same..
  </form>

Check out this example on stackblitz

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

Is it possible to invoke a Java function from a text box on an HTML page?

For a web project using JSP, MySQL, AJAX with Netbeans and MySQL, I have three textboxes. Two textboxes are for user input, and the third should display the product of the two input values. How can I achieve this? Should I make an AJAX call or can I call ...

javascriptmysqlajaxjspnetbeans

Tips for resolving the Error: Hydration issue in my code due to the initial UI not matching what was rendered on the server

export default function Page({ data1 }) { const [bookmark, setBookmark] = useState( typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('bookmark')) : [] ); const addToBookmark = (ayatLs) => { s ...

javascriptreactjsnext.js

Exploring the differences between req.params and req.query when working with Next.js dynamic API routes

I am perplexed by the difference in accessing params in my Next.js API routes compared to traditional express routes. In order to access a specific dynamic route ID, I find myself using req.query instead of the usual params. Is this the preferred method fo ...

javascriptnode.jsexpressnext.js

Setting up computed properties in VueJSSetting up computed values in

I am currently working on developing a lottery number service, and I am curious about how to set up computed properties. I came across the Vue.js documentation for computed properties at https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties. I tr ...

javascriptvue.jsvuejs2

Visibility issue with Angular 4 ngFor variable within specific child component

I'm facing an unusual issue that I need help with. I am using a simple ngFor loop in my template code and for some reason, the variable I am trying to access is visible everywhere inside the loop except for one particular subcomponent. It's stran ...

angularangular2-templatengfor

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...

javascriptjqueryjson

Is it possible to authenticate a user in Firebase using Node.js without utilizing the client side?

Can I access Firebase client functions like signInWithEmailAndPassword in the Firebase SDK on the server side? Although SDKs are typically used for servers and clients use JavaScript, I need a non-JavaScript solution on the client side. I have set up the ...

javascriptnode.jsfirebaseexpressfirebase-authentication

Angular: Leveraging real-time data updates to populate an Angular Material Table by subscribing to a dynamic data variable in a service

Seeking guidance on how to set up a subscription to a dynamic variable (searchData - representing search results) for use as a data source in an Angular Material Table. I have a table-datasource.ts file where I want to subscribe to the search results from ...

javascriptangular

I am seeking assistance in transmitting data to my server utilizing Ajax, PHP, and mySQL without relying on a form

I have been researching tutorials on how to work with JavaScript without using forms. Currently, I have the JavaScript code that maps my answers based on clicks and generates an array shown in an alert. However, I am unsure if the Ajax request is sending i ...

javascriptphpjquerymysql

Using a combination of jQuery and JavaScript to switch image tags between different classes

I'm really struggling with this issue and could use some guidance. Essentially, I have a code that should change the class of an img tag when a user clicks on a div element. Let's take a look at the HTML structure: <li><img src ...

javascriptjqueryhtmlclasstoggleclass

Angular JS - A guide to implementing ng-model binding at a later stage

In a large codebase, there is a straightforward scenario that I need help with: There is an Angular APP and Controller already set up and functioning correctly. However, a ng-model element needs to be dynamically created at a later stage (perhaps through ...

javascriptangularjs

Ways to resolve Cross-Origin Resource Sharing (CORS) issue encountered in Report

I am currently working on an Angular project and trying to render SSRS reports within the app by utilizing a specific package. The application is hosted at http://localhost:52698/ while the SSRS server resides on a different domain http:\ssrsserv ...

angularreporting-servicessame-origin-policyx-frame-options

The onkeyup event is not functioning properly, whereas the onchange event is working

I have encountered an issue where both the onkeyup and onchange functions are present on the same page. The problem arises when the onchange function performs an action, causing the onkeyup function to not respond accordingly. However, if I do not interact ...

javascriptphpajax

Node JS failing to fulfill promises before returning

Seeking some assistance here. I have a series of promise-returning functions structured with .then() that ultimately formats data for the client. However, it seems that the server is sending the 'ff' variable to the client before the formatting f ...

javascriptnode.jsexpresspromise

Tips for integrating an angular module that lacks Universal compatibility into an angular/cli application with server-side rendering (SSR) support

Greetings everyone! I've been working on developing an Angular app that utilizes Universal with SSR for quite some time now. At times, while including a module like ngx-editor, I noticed that the server would fail silently without any indication of wh ...

node.jsangularangular-universalangular2-aot

Is Angular mat-icon undergoing a "transformation"?

Overview: The material icon I am using is the "+" sign to represent adding a new item on a webpage. While it displays correctly in English, the Spanish version of the site shows "ñ" instead. Inquiry: Should I leave the tags empty or remove the translati ...

angularinternationalizationangular-materialangular-i18n

The typings for object properties in Typescript

I recently encountered a function call in my code: var myVar = myFunction({ property: 'prop', functionProperty() { console.log(this.property); }, functionProperty2() { this.functionProperty(); } }); I' ...

typescripttypescript-typings

Using v-select to bind values directly to objects

My v-select is set up to map objects in the following way: <v-select v-model="object" :items="objectsArray" label="Select Object" item-text="name" item-value="id" ></v-select> Where: The 'object ...

javascriptvue.jsvuetify.js

Troubleshooting async/await issues in certain IDEs

I've been experimenting with aysnc and await in my project. While it worked perfectly in FiddleJS, I encountered an error when trying to implement it in my IDE (PHPSTORM 2017): async function test(url){ ^^^^^^^^ SyntaxError: Unexpected token f ...

javascriptnode.jsasync-await

Opting out of notifications using Angular's NGXS

I'm new to NGXS in Angular and have recently learned that you don't need to manually unsubscribe when using the async pipe. However, I am currently subscribing to both query parameters and dispatched actions. Do I still need to manually unsubscri ...

angularrxjsangular6ngxs