For editing values that have been dynamically inserted

Question

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:

https://i.sstatic.net/1AG34.png

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:

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

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

angular typescript angular6

Answer 1

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>

Answer 2

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>

For editing values that have been dynamically inserted

Answer №1

Similar questions

Are we on the correct path for breaking down code using react JS?

Contact the help desk and receive information that is currently unknown

How can the component prefix be replaced or updated in Angular 8/9?

Validating PrimeNG Tables

What causes the 401 error to be triggered when utilizing an interceptor?

Fixing permission issues during the installation of Angular Client on MacOS: A comprehensive guide

Troubleshooting npm installation issues with Angular 2 Quickstart guide (URL: https://angular.io/docs/js/latest/quickstart.html)

Converting keyValue format into an Array in Angular using Typescript

A function injected into a constructor of a class causes an undefined error

When running the ng test command, the error "TypeError: The 'compilation' argument must be an instance of Compilation" is generated, but the ng build command functions correctly

Exploring the Power of Map with Angular 6 HttpClient

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

Using the spread operator in Typescript with an object that contains methods

Is it true that one must have 280 different dependencies in order to use angular2?

Issues encountered when utilizing a computed property in Typescript to organize an array

Enhancing React Flow to provide updated selection and hover functionality

Is it possible to secure an API endpoint from unauthorized access by external authenticated users not originating from the requesting application?

Can you use the useCallback function within a nested callback function?

Solving the 'ExpressionChangedAfterItHasBeenCheckedError' in Angular 8