The value of a Mat dialog within a mat table will remain consistent when an addrow action is performed

After attempting to open my table, here is what I discovered:

https://i.sstatic.net/F3zCZ.png

When opening the dialog box, it displays a list on my table.

https://i.sstatic.net/SyJJk.png

However, upon clicking "add row," it duplicates the value for me.

https://i.sstatic.net/KfCGL.png

This is the process I followed: https://stackblitz.com/edit/mat-dialog-example-zhfnzy

The issue lies in maintaining the value in my first index. How can I select the second index without losing the value from the first one?

Answer №1

Your text has been written

<!--REMOVE [(ngModel)]-->
<input type="text" formControlName="address" [(ngModel)]="value" />

To remove the[(ngModel)], it is advised not to use it in the same tag as formControlName. By using [(ngModel)], you are assigning two values to the input field, which does not make sense.

Additionally, remember to use formControlName for your first two inputs (instead of formControl).

  <input type="" formControl="name" />
  <input type="" formControl="lastname" />

It appears that your question title mentions Mat-dialog, but there is no mention or implementation of Mat-dialog in your StackBlitz project. Please provide more information or consider changing the question title accordingly.

Update Modify your openAlertDialog function as follows:

  openAlertDialog(index:number) {
    const dialogRef = this.dialog.open(AlertDialogComponent, {});

    dialogRef.afterClosed().subscribe((result) => {
      this.fg.get('Info.'+index+'.address').setValue(result)
    });
  }

Take note of how the setValue method is used to assign a value to a FormControl and how the get method is utilized to access the formControl.

You can also access the element in a similar way:

((this.fg.get('Info') as FormArray)
              .at(index) as FormGroup)
              .get('address')

However, to avoid casting, simply utilize the "dot" notation with get.

Update 2 The 'result' can also be an object as shown in the example below:

this.dialogRef.close({address:row.symbol,phone:row.name});

In such cases, objects can be passed similarly to FormArrays. You can then use setValue or patchValue to update the element in the formArray, like so:

 this.fg.get('Info.'+index).setValue(result)
 //or
 (this.fg.get('Info') as FormArray).at(index).setValue(result)

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

Limit the keys of an object to only those present in the provided array

I am trying to use Typescript to limit the keys of a given object in a React component to only the items contained within an array that is also passed to the component: <MyComponent values={{ dog:true }} items={['dog']} /> // valid ...

Angular Swiper Integration: Maintaining Scope Inside Configuration Callback

Trying to grasp the concept of working with callbacks to maintain scope can be a bit tricky, as I've been experiencing. Specifically, I've been struggling with a callback in the Swiper library for Angular, where I am unable to keep my desired sco ...

Is there a TypeScript alternative to triggering a click event on a specific class using $(".class").click()?

I am currently utilizing a date range picker within an Angular project. <button type="button" class="btn btn-danger daterange-ranges"> <i class="icon-calendar22 position-left"></i> <span></span> <b class="caret"></b ...

Adjust the appearance attribute of FormField within the designated theme

Currently, I am collaborating within an NX Monorepo and utilizing a shared ui-components library that extends the capabilities of Angular Material Components. Despite using different themes for various applications, I am aiming to incorporate appearance=&a ...

Exploring directory organization in GraphQL Queries using GatsbyJS

In my portfolio, I have organized my work into categories, pieces, and pictures in a cascading order similar to a child-parent relationship. The folder structure reflects this hierarchy, with the main problem being explained in more detail below. Folder s ...

Angular: avoid API errors from being displayed in the HTML template

While working with HTTP requests in my Angular app, I encountered an issue where a status code of 400 is returned for invalid data input, causing the HTML template not to be displayed on the view. Currently, I am handling this situation by: this.myServic ...

Guide to Integrating Pendo with Angular 8 and Above

I'm having some trouble setting up Pendo in my Angular 8 application. The documentation provided by Pendo doesn't seem to align with the actual scripts given in my control panel. Additionally, the YouTube tutorials are quite outdated, appearing t ...

Reorganizing Firebase data in Ionic 2

I am currently working on an exciting project to develop an Ionic notes application, where users can easily rearrange items in the list using the reorderArray() function. However, I encountered an issue with Firebase resulting in an error message related t ...

Issue with npm resolution due to package requiring another third-party dependency

I'm encountering an issue with a requirement and I'm hoping for some assistance. I currently have a package called @unicoderns/orm that relies on mysql, which can be found at https://github.com/unicoderns/ORM Now I'm working on developing ...

Iterate through a list of JSON strings and modify an element every N iterations

I'm working on a function that takes a list of json strings and replaces each occurrence of [link] with a different item from another list of links. I want to be able to specify how many times to cycle through the link list for replacement. import ite ...

Making @types compatible with TypeScript 2.1 in Visual Studio 2015 Update 3

The potential of TS 2.x @types is intriguing, but I'm struggling to make it work effectively! I'm using Visual Studio 2015 - version 14.0.25431.01 Update 3 My TypeScript version for Visual Studio 2015 is 2.1.4, downloaded from this link The VS ...

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe: <ng-container> <iframe [src]="eUrl" id="flipping_book_iframe" frameborder="0" allowfullscreen="allowfullsc ...

Tips for determining if a class has been declared in Typescript

When it comes to checking if a class (or any other element) exists in the global scope, Javascript offers a convenient method: typeof SomeUndeclaredOne === 'undefined' However, this approach doesn't translate well into TypeScript as it trig ...

What is the best way to set one property to be the same as another in Angular?

In my project, I have defined a class called MyClass which I later utilize in an Angular component. export class MyClass { prop: string; constructor(val){ this.prop = val; } public getLength(str: string): number { return str.length; } ...

Creating Lists dynamically in Java without any duplicates can be achieved by using a HashSet to store

When looking at a similar question like How to dynamically create Lists in java?, I found that I have a very similar issue to the one asked by another individual. Within my project, I am working with airplanes, airports, and passengers for PNR records. T ...

Why does Angular-CLI remove an old module when installing a new module using npm?

After adding the ng-sidebar module to my app, I decided to install a new module called ng2-d&d: npm install ng2-dnd --save However, after installing the new module, the old ng-sidebar module was removed from the app-module and an error occurred: C ...

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

Currently, I am working with Typescript in React. Strangely, when I try to import the following: import { Image } from 'cloudinary-react'; I encounter this error: Could not find a declaration file for module 'cloudinary-react'. ' ...

Obtaining the value of dynamic checkboxes in Ionic 2

My goal is to populate checkboxes from a database and allow users to complete the checkbox form before submitting it back to the database. However, I am struggling to capture the values of dynamically populated checkboxes in my code snippet below. expor ...

Using Angular 2 to Showcase JSON Array Data with Component Selector

I am struggling to showcase a specific array value, taxes, using the component selector without any success. At the moment, the component selector is displaying all values in the template/model. My goal is to only display the taxes value of the model. use ...

Dealing with numerous promises nested within a single promise

I'm in the process of developing a service method that fetches data from an API and returns it as a promise. The challenge here is that I need to ensure that the parent object, along with all its child objects, are fully retrieved before resolving the ...