How to edit and update the dynamically added input values [closed]

问题

Scenario:

Below is my json file called contacts:

[
   {
     "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 am displaying the name and address of the contacts(For ex one particular contact) like this:

Expected Result:

I am displaying many addresses, If i click on particular address(For ex addressType: Home) i must able edit that address means i should get that address values(i,e addressType, city, postalCode) in the below input fields like this:

So that i can edit and update that particular address.

Then i should be able add a new address from that input fields.

Below is my stackblitz DEMO

回答1:

try this online example

I changed these:

use Update mode if an address is selected or Add mode if it is not
add your form data to contacts array for a particular index
update the selected address from your edit data

  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>

回答2:

When you work with a form in Angular then try accessing and working with data from form directives: FormGroup, FormArray etc.

In your code you've combined output of data from simple contacts array and tried then mix it with form controls.

Create form group for all the form correctly so that it matches your interface, then use data from it on the form, especially if you have an ability to modify it in form.

Using formControls on inputs etc your data is being modified on user input so you can retrieve it with a .value property. When you group data in formGroups you can access all then aggregated data with formGroup.value where all the structure and data you created will be.

I've updated your stackblitz. With partially implemented what I've told. Continue in this way and you'll get maintainable and quite readable code.

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

Update

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

来源：https://stackoverflow.com/questions/54220193/how-to-edit-and-update-the-dynamically-added-input-values

标签

angular

typescript

angular6