For editing values that have been dynamically inserted

In my JSON data, there is a variable named address that contains multiple objects (i.e., multiple addresses). I am displaying these multiple addresses as shown in the following image:

  • When clicking on a specific address (e.g., addressType: Business), the values of that address (such as postalCode and City) are displayed in the input fields below. After editing the address, upon hitting the add button, the edited address is saved, but the input fields should be cleared, as shown in this image:

However, I am currently unable to clear the input fields without refreshing the page in order to add a new address.

  • By clicking on delete, I should be able to delete that particular address.

DEMO

angulartypescriptangular6

Answer №1

If you want to ensure the form is cleared after updating the data, don't forget to utilize the reset method.

saveAddress(index, form: FormGroup) {
    if (this.mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
      form.reset();
    } else if (this.mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
      form.reset();  // The form is reset at this point
    }
}

For deletion purposes -

deleteRecord(i, j){
    this.contacts[i].addresses.splice(j, 1);
}

<div class="main" *ngFor="let contact of contacts;let i = index">

<form [formGroup]="addForm" #myForm>

  <p>Name: {{contact.name}}</p>
  <br>
<!-- Address section -->
      <div  class="address-sec">
        <p id="addr">Addresses</p>
        <br>
        <table style="width:100%" *ngFor="let addr of contact.addresses; let j = index">
            <tr>
                ....
                <td>
                    <div class="field-data" (click)='deleteRecord(i,j)'>
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>

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

Encountering difficulties importing an NPM library into StackBlitz

Hey there, I'm currently attempting to replicate an Angular example online but am encountering issues importing my Tabulator Library in stackblitz. I keep receiving an error when trying to import it in the hello component. import Tabulator from &apo ...

angulartypescriptnpmstackblitz

Display captions on react-player videos using an .srt file

Currently, I am working on a React/Typescript project with Next.js. A key feature of this project is a modal that utilizes 'react-player' to display videos. While the video and modal are functioning as intended, I am looking to incorporate capti ...

reactjstypescriptreact-playersrt

Tips for sorting server components using a URL search parameter [Next.js, Prisma]

My goal is straightforward: I want to be able to filter my Prisma database based on parameters passed in the URL when I click on a CategoryBox. After clicking on a CategoryBox, my URL does change to something like http://localhost:3000/?category=XYZ, but ...

typescriptnext.jsprisma

Enums are not recognized by TypeScript when used within an array

I have defined an enum as follows: export enum Roles { ADMIN, NONE; } An object is being used which utilizes this enum. The structure of the object is: export interface User { name: string; roles: Roles[]; } Upon fetching this object via a web r ...

angulartypescriptenums

Is it possible to render several components for a single route in React?

My application has a layout featuring three columns: a navigation column, a toolbox, and a main content area. However, not all of these components are always present. I now want to display different components in each of these columns. Currently, I am har ...

angularangular2-routing

Transferring dynamic parameters from a hook to setInterval()

I have a hook that tracks a slider. When the user clicks a button, the initial slider value is passed to my setInterval function to execute start() every second. I want the updated sliderValue to be passed as a parameter to update while setInterval() is r ...

javascriptreactjstypescript

Struggling with implementing Angular and TypeScript in this particular method

I'm dealing with a code snippet that looks like this: myMethod(data: any, layerId: string, dataSubstrings): void { someObject.on('click', function(e) { this.api.getSomething(a).subscribe((result: any) => { // ERROR CALL 1. It ...

javascriptangulartypescript

In what way can TS uniquely handle each element of an array as the key of an object?

I am struggling with an object that I need to have keys representing every item in the array, each linked to a value of any. Can anyone provide guidance on how to achieve this? Unfortunately, I couldn't find a solution. Here is an example for refere ...

typescript

Using TypeScript to call Node.js functions instead of the standard way

Can someone assist me with the issue I'm facing? I have developed a default node.js app with express using Visual Studio nodejs tools, and now I am attempting to call the setTimeout function that is declared in node.d.ts. The code snippet in question ...

javascriptnode.jstypescriptsettimeoutntvs

Step-by-step guide on bypassing Content Security Policy with JavaScript

I have Content Security Policy enabled for security purposes in my current project, but I need to disable it for certain JavaScript files. Can this be done? I am trying to make API calls from my JavaScript files in order to retrieve results. ...

javascriptjqueryangulargoogle-chrome

Combining the namespace and variable declarations into a single statement

Currently, I am facing an issue with creating a declaration file for the third-party library called node-tap. The main challenge lies in properly declaring types for the library. // node_modules/a/index.js function A() { /* ... */ } module.exports = new A ...

node.jstypescript

Activate the location feature within an Ionic application

When using the function this.geolocation.getCurrentPosition() to retrieve the user's latitude and longitude, I encounter issues when the location setting is turned off. It does not provide any response in such cases. I am seeking a way to notify the u ...

angularionic-frameworkionic3

Issues with displaying content in <mat-step> element of Angular Material design

When installing Material in Angular and adding stepper HTML code, CSS, and importing all Mat modules into the app.module.ts file, the stepper is now visible. However, the stepper data is not showing up in the HTML. <mat-stepper #stepper> <mat-s ...

jsonangularmaterial-uiangular-materialangular-ui-router

searchByTextContentUnderListItemAnchorTag

I would like to utilize the getByRole function for writing my test. However, I am encountering issues when using linkitem or 'link' as the role. It seems that I cannot find the desired element. // encountered error TestingLibraryElementError: The ...

javascripttypescriptunit-testingreact-testing-librarytesting-library

The module "ng-particles" does not have a Container component available for export

I have integrated ng-particles into my Angular project by installing it with npm i ng-particles and adding app.ts import { Container, Main } from 'ng-particles'; export class AppComponent{ id = "tsparticles"; /* Using a remote ...

javascriptangulartypescriptanimationparticles.js

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 ...

angular

Creating a Blob or ArrayBuffer in Ionic 2 and Cordova: Step-by-Step Guide

Is there a way to generate a blob or an arrayBuffer with TypeScript when using the Camera.getPicture(options) method? I am currently working on an Ionic 2/Cordova project. var options = { quality: 90, destinationType: Camera.DestinationType.FILE_ ...

cordovaangulartypescriptionic2cordova-plugins

What is the syntax for defining parameters in an overloaded arrow function in TypeScript?

Trying to create an async arrow function that can handle a single image object or an array of image objects. I'm new to TypeScript overloading and may be approaching this the wrong way. Here's what I've come up with: type ImageType = { ...

javascripttypescript

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

cssangularangular-material

Working with TypeScript to set a value for an object's field

I have two objects of the same model: interface Project { _id?: string title: string description: string goal: string tasks?: Task[] createdAt?: Date updatedAt?: Date } The first object contains all fields from the interface, while the secon ...

typescriptexpress