Inject the dynamic form control value into the template

Is there a way to retrieve the text area value and pass it when a button is clicked?

<form novalidate [formGroup]="simulationForm">
     <div  formArrayName="answer_key"  *ngFor="let other of simulationForm.get('answer_key').controls; let i = index" class="form-group">

          <div [formGroupName]="i" class="mat-form-field--inline">
                    {{i + 1}}.
                    <mat-form-field>
                        <textarea matInput placeholder="Sentence" id="sentence" formControlName="sentence" readonly="true"></textarea>
                    </mat-form-field>
          <button class="btn btn-success" type="button" (click)="openDialog()">Add</button>
                </div>  
          </div>
</form>

Trying to send the sentence value from each row when the respective button is clicked.

For instance,

(click)="openDialog(simulationForm.get('sentence').value)"

Alternatively, you could try

(click)="openDialog(simulationForm.get('answer_key').controls['sentence'].value)"

Answer №1

(click)="openModal(i)"

openModal(idx:number)
{
   const answer=(simulationForm.get('key_value') as FormArray)
       .at(idx).get('text').value

   //or 
   const answer=(simulationForm.get('key_value') as FormArray)
       .at(idx).value.text

   //I'm not certain about
   const answer=simulationForm.value.key_value[idx].text


}

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

The TypeScript variable is automatically assigned the type 'any' since it does not contain a specified type annotation

Issue: The variable 'environment' is implicitly assigned the type 'any' because it lacks a specific type annotation and is referenced within its own initialization code. Code Snippet: export const environment = { production: fals ...

What is the most effective way to provide an optional parameter to each child during the rendering of a component

The parent component contains a non-optional prop that I need to pass to each child without explicitly defining it in every child component. interface Props { foo: true; } export class Parent extends React.Component<Props>{ public render() ...

Typescript: require generic types to include specific keys at all times

Is there a way to ensure that the function below only accepts a data object if it contains an id key, and then allows us to access the id from the data object? function someFuntion<T>(data : T){ const id = data['id'] //Error : Element imp ...

Is it necessary to set up webpack for ES6 support?

I am encountering an issue with my Angular application that has a .tsconfig file set to target ES6. { "compileOnSave": false, "compilerOptions": { "allowJs": true, "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "de ...

The system is unable to locate a compatible object with the identifier '[object Object]' of type 'object'. NgFor is limited to binding with iterables like Arrays, not JSON data

Working with JSON data data:[ { assets:[[tool_order_id: "38",order_status_id: "10"]], order_info:[id: "1", order_type: "6",check: "1", current_Stage_id: "29"] }, { assets:[tool_order_ ...

The Nx end-to-end Cypress runner ensures that values from the cypress.env.json file do not overwrite the same entries in the cypress.json environment object

Having encountered an issue with my Nx powered angular project, I am facing a situation where the values provided in a cypress.env.json file are not overriding the corresponding entries in the env object of the cypress.json configuration file. This is a n ...

How can parameters be implemented in Angular similar to NodeJs Express style?

Is there a way to implement a Parameter in Angular routes that resembles the NodeJs style? I have a route like **http://myhost.domain.com/signin**" and I want to pass an id for the signin request. Although I can achieve this using **http://myhost.doma ...

The program encountered an issue: it cannot access the property 'invalid' because it is undefined

I have a scenario where I am utilizing nested FormGroup in Angular, with the parent formGroup in the HTML and skills as the nested form. However, during validation, the controls are not being found. Can anyone provide assistance with thi ...

Creating a specialized Typescript deep partial type for specific attributes

I have a challenge in writing a utility type that takes an object as a generic parameter and a union of strings to recursively make specific properties optional. While it may sound simple, I encountered an issue that I need assistance with. Here is the uti ...

Looking to adjust the header height of an angular mat-table with column groups? The table I'm currently working on has both main headers and sub headers

I recently utilized some code snippets from this StackBlitz example. However, I am facing an issue with the height property not functioning as expected. Is there a method to customize the height of both the main header and subheader? th.mat-header-cell, ...

Enabling custom file extensions for JavaScript IntelliSense in VS Code: A step-by-step guide

The title of this query reveals my predicament. In our organization, we employ an unconventional file extension for source code written in JavaScript. It appears that switching the file extension to ".js" triggers IntelliSense. My curiosity lies in whethe ...

Navigating between pages has become challenging due to issues with the navbar, sidebar,

I successfully developed 4 Angular components: 1st component: menu 2nd component: header 3rd component: home 4th component: login The menu component features a sidebar/navbar created using Material UI. The login component consists of the login page. Howe ...

What is the process for downloading the array of images' responses?

Currently, my setup involves Angular 5 on the front end and Spring Boot on the backend. I am facing the challenge of downloading the JSON response of images. Can anyone provide guidance on how to achieve this? ...

What is the method for locating an element within an array?

The content being returned is presenting a challenge. How can I retrieve data from inside 0? I attempted to access it using date[0] without success const { data } = getData(); The result of console.log(data) is shown below: enter image description here ...

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

Obtain an array containing only unique values from a combination of arrays

Is there a simple way or plugin that can help me combine values from multiple arrays into one new array without duplicates? var x = { "12": [3, 4], "13": [3], "14": [1, 4] }; The resulting array should only contain unique values: [1, 3, 4]; ...

Increase the ngClass attribute's value

Is there a way to automatically increment a numeric value in a class using the ngClass directive? For example, can we achieve something like this: <some-element [ngClass]="'class-*'">...</some-element>, where the asterisk (*) will in ...

React.Context is associated with a universal module definition global variable

I have just created a new context.tsx file containing the following code: import { createContext } from 'react'; export interface LibsAndComponentsInterface { data: unknown[]; } export const LibsAndComponentsContext = createContext< Libs ...

Extracting Information from a Table in Angular 7

Hi there, I'm new to this forum so if I break any rules, please let me know! I'm working with the code below in my app.component.html: <tr *ngFor="let item of items" (click)="getClient($event)"> <td> {{ item.nr }} </td> ...

Typescript interface created specifically for React Higher Order Component Props

Consider the React HOC provided below which adds sorting state to a component: import React, {Component, ComponentClass, ComponentType} from 'react' interface WithSortState { sortOrder: string } interface WithSortInjectedProps { sortO ...