Steps for modifying and refreshing the dynamically included input data

Question

Steps for modifying and refreshing the dynamically included input data

Situation:

The example below shows a file named contacts in JSON format:

[
   {
     "name": "Ailis Wyld",
     "addresses": [
        {
            "addressType": "Business",
            "city": "Lansing",
            "postalCode": "48930"
        },
        {
            "addressType": "Home",
            "city": "Young America",
            "postalCode": "55573"
        }
     ]
  },
  {
    "name": "Aksel",
    "addresses": [
        {
            "addressType": "Business",
            "city": "Battle Creek",
            "postalCode": "49018"
        },
        {
            "addressType": "Home",
            "city": "Memphis",
            "postalCode": "38131"
        }
    ]
   },
   {
     "name": "Dearan",
     "addresses": [
        {
            "addressType": "Other",
            "city": "Minneapolis",
            "postalCode": "55417"
        },
        {
            "addressType": "Other",
            "city": "Sacramento",
            "postalCode": "95833"
        }
    ]
   }

]

I have a display for the name and address of each contact, like shown here:

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

Desired Outcome:

For multiple addresses displayed, clicking on a specific address (e.g., addressType: Home) should allow me to edit that address by showing its values (addressType, city, postalCode) in input fields as depicted here: https://i.sstatic.net/Tt4S2.png

This would enable me to make edits and update that particular address.

Additionally, I should be able to add a new address using those input fields.

Here is a link to my stackblitz DEMO

angular typescript angular6

Answer 1

Answer №1

check out this live demo

Here are the modifications I made:

Switch between Update mode for selected addresses and Add mode for new ones
Include form data in the contacts array based on the selected index
Update the address with edited information once saved

  selectAddr(addr) {
    this.newAttribute.addressType = addr.addressType;
    this.newAttribute.postalCode = addr.postalCode;
    this.newAttribute.city = addr.city;

    this.selectedAddr = addr;
  }

  saveAddress(index, form: FormGroup) {
    const mode: 'update' | 'add' = this.selectedAddr ? 'update' : 'add';

    if (mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
    } else if (mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
    }

    // reset
    this.selectedAddr = undefined;
    form.reset();
  }

<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">
            <tr>
                <td>
                  <div id="field-type">
                      <mat-chip-list>
                        <mat-chip color="primary" (click)="selectAddr(addr)" selected>{{addr.addressType}}</mat-chip>
                      </mat-chip-list>
                  </div>
                </td>
                <td>
                    <div class="field-data">
                   {{addr.city}}-{{addr.postalCode}}
                </div>
                  </td>
                <td>
                    <div class="field-data">
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>
  <br>
  <!--Address Section-->

  <mat-form-field>
    <mat-select formControlName="addressType" placeholder="Type" [(ngModel)]="newAttribute.addressType">
        <mat-option *ngFor="let addressType of addresstypes" [value]="addressType.value">
            {{addressType.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<br>
     
<mat-form-field >
    <input matInput formControlName="postalCode"  [(ngModel)]="newAttribute.postalCode"  placeholder="Postal Code" >
</mat-form-field>
<br>
<mat-form-field >
    <input matInput formControlName="city"  [(ngModel)]="newAttribute.city"  placeholder="City" >
</mat-form-field>
<br>

     <br><br><br><br>
        <button mat-flat-button    (click)="saveAddress(i,myForm)">Save</button>
</form> 
<br>
<hr>
</div>

Answer 2

check out this live demo

Here are the modifications I made:

Switch between Update mode for selected addresses and Add mode for new ones
Include form data in the contacts array based on the selected index
Update the address with edited information once saved

  selectAddr(addr) {
    this.newAttribute.addressType = addr.addressType;
    this.newAttribute.postalCode = addr.postalCode;
    this.newAttribute.city = addr.city;

    this.selectedAddr = addr;
  }

  saveAddress(index, form: FormGroup) {
    const mode: 'update' | 'add' = this.selectedAddr ? 'update' : 'add';

    if (mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
    } else if (mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
    }

    // reset
    this.selectedAddr = undefined;
    form.reset();
  }

<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">
            <tr>
                <td>
                  <div id="field-type">
                      <mat-chip-list>
                        <mat-chip color="primary" (click)="selectAddr(addr)" selected>{{addr.addressType}}</mat-chip>
                      </mat-chip-list>
                  </div>
                </td>
                <td>
                    <div class="field-data">
                   {{addr.city}}-{{addr.postalCode}}
                </div>
                  </td>
                <td>
                    <div class="field-data">
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>
  <br>
  <!--Address Section-->

  <mat-form-field>
    <mat-select formControlName="addressType" placeholder="Type" [(ngModel)]="newAttribute.addressType">
        <mat-option *ngFor="let addressType of addresstypes" [value]="addressType.value">
            {{addressType.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<br>
     
<mat-form-field >
    <input matInput formControlName="postalCode"  [(ngModel)]="newAttribute.postalCode"  placeholder="Postal Code" >
</mat-form-field>
<br>
<mat-form-field >
    <input matInput formControlName="city"  [(ngModel)]="newAttribute.city"  placeholder="City" >
</mat-form-field>
<br>

     <br><br><br><br>
        <button mat-flat-button    (click)="saveAddress(i,myForm)">Save</button>
</form> 
<br>
<hr>
</div>

Answer 3

Answer №2

When working with forms in Angular, it is important to access and manipulate data using form directives such as FormGroup and FormArray.

In your code, you attempted to combine data from a simple contacts array and integrate it with form controls.

Ensure that you create form groups for all the form elements correctly to align with your interface, and then utilize the data from these form groups on the form itself, especially if there is a need to modify it within the form.

By utilizing formControls on inputs, your data can be altered based on user input, allowing you to retrieve it using the .value property. When grouping data in formGroups, you can access all the aggregated data using formGroup.value, where you will find the entire structure and data you have created.

I have made updates to your stackblitz with some of the mentioned changes implemented. By continuing in this manner, you will achieve more maintainable and easily comprehensible code.

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-l6awjk?file=src/app/app.component.html

Update

Check out the address edit example in this updated stackblitz: https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-w9ty9b?file=src/app/app.component.html

Answer 4

When working with forms in Angular, it is important to access and manipulate data using form directives such as FormGroup and FormArray.

In your code, you attempted to combine data from a simple contacts array and integrate it with form controls.

Ensure that you create form groups for all the form elements correctly to align with your interface, and then utilize the data from these form groups on the form itself, especially if there is a need to modify it within the form.

By utilizing formControls on inputs, your data can be altered based on user input, allowing you to retrieve it using the .value property. When grouping data in formGroups, you can access all the aggregated data using formGroup.value, where you will find the entire structure and data you have created.

I have made updates to your stackblitz with some of the mentioned changes implemented. By continuing in this manner, you will achieve more maintainable and easily comprehensible code.

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-l6awjk?file=src/app/app.component.html

Update

Check out the address edit example in this updated stackblitz: https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-w9ty9b?file=src/app/app.component.html

Steps for modifying and refreshing the dynamically included input data

Answer №1

Answer №2

Similar questions

The rendering of the Angular 2 D3 tree is not functioning properly

Angular Observable returning null results

.observe({ action: (response) => { this.updateData = response.Items; }. what comes after this

After updating next.config, the NextJS + NextAuth middleware doesn't seem to be triggered

What To Do When You See "Unable to retrieve the 'get' property of an undefined or null reference" Error

Sign out from Azure Active Directory using the ADAL library in an Angular application written in TypeScript

Where can I find the refresh token for Azure Single Sign-On with MSAL?

Exploring Uppercase and Lowercase Filtering in NGXS for Angular Developers

Adjust the placement of a div within another div based on various screen sizes dynamically

Error: Could not locate module: 'path' in ' ode_modulessource-map-support' - npm

Error message "Could not locate module while constructing image in Docker."

Struggling to make the transition from JavaScript to TypeScript in Ionic 2

Troubleshooting problems encountered when duplicating an array in JavaScript

Arrange the elements within the anchor tag in a vertical line using Angular Material

Problem with Angular 2 Typings Paths in Typescript

Issue with bi-directional data binding in Angular's matInput component

The ngOnInit lifecycle hook is not triggered by the Angular routerLink

Testing MatSnackbar with Jasmine Karma in Angular: A Comprehensive Guide

Angular 2: A Beginner's Guide to Creating Objects and Transforming Code from Angular to Angular 2

Error: The NgTools_InternalApi_NG_2 member is not exported in compiler-cli/src/ngtools_api