не может получить значения текущего элемента при отправке события

Question

У меня есть массив объектов json, который я связываю с HTML-формой и mat-expansion-panel представлением.Я пытаюсь получить измененное значение name поля ввода, но в любом случае оно возвращает начальное значение.Например, если я изменю name1 на name111 и нажму кнопку отправки, в окне предупреждения появится name1.Если использовать this.myForm.controls["name"].value, он возвращает последнее измененное значение, но это неверно, потому что я мог нажать кнопку сохранения другого элемента.

Как получить все значения полей ввода текущего элемента в событии отправки? (Включая измененные значения)

https://stackblitz.com/edit/angular-3xjnjv?file=src%2Fapp%2Fapp.component.ts

пример:

1) Я получаю

id1 |имя = имя1 |кнопка сохранения1

id2 |имя = имя2 |кнопка сохранения2

id3 |имя = имя3 |кнопка сохранения3

2) меняю

id1 |имя = измененное имя1 |кнопка сохранения1

id2 |имя = измененное имя2 |кнопка сохранения2

id3 |имя = измененное имя3 |кнопка сохранения3

3) нажимаю кнопку сохранения2

4) вижу item: changedname2

onSubmit() {
window.alert("item: " + this.selItem.name);  //  item: changedname2   
}

app.component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <mat-expansion-panel [expanded]="isFirst" *ngFor="let item of items; let isFirst = first; let i = index;">
  <mat-expansion-panel-header>
    <mat-panel-title>
      <h3>{{item.id}}</h3>
    </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>

         <div class="row">
            <div>
                <input matInput formControlName="id" value="{{item.id}}" placeholder="{{id}}" type="text">
            </div>  
         </div>
         <div class="row">
             <div>
                <input matInput formControlName="name" value="{{item.name}}" placeholder="{{name}}">
             </div>
         </div>
         <button (click)="setItem(item)" mat-raised-button >{{updateItem}}</button>
</mat-expansion-panel>
</form>

app.component.ts

import { Component } from '@angular/core';
import { ChangeDetectionStrategy, OnInit, ViewChild } from '@angular/core';
import { Observable  } from 'rxjs/Observable';
import { of  } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';
import { MatSort, Sort } from '@angular/material';
import { MatPaginator, PageEvent } from '@angular/material';
import { fromMatSort, sortRows } from './datasource-utils';
import { fromMatPaginator, paginateRows } from './datasource-utils';
import { FormBuilder, FormGroup, FormArray , Validators } from '@angular/forms';


export interface PeriodicElement {
  id: string;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

updateItem = 'Save';

  myForm: FormGroup;
  items: any;
  selItem: any;

  constructor(private formBuilder: FormBuilder) { }

  onSubmit() {
    window.alert("item: " + this.selItem.name);
    window.alert(this.myForm.controls["name"].value);
    // ...
  }

  ngOnInit() {

    this.myForm = this.formBuilder.group({
        id: [''],
        name: ['']
    }); 

        const ELEMENT_DATA: PeriodicElement[] = [{"id":"id1",
                                                "name":"name1"},
                                                {"id":"id2",
                                                "name":"name2"},
                                                {"id":"id3",
                                                "name":"name3"}
                                                //,...
                                                ];
          this.items = ELEMENT_DATA;       

  }

  setItem(item) {
     this.selItem = item;
  }

}

Answer 1

HTML file - 

// 1 - add (ngModelChange)="updateName(i)" to the input

<input matInput formControlName="name" value="{{item.name}}" placeholder=" 
{{name}}" (ngModelChange)="updateName(i)">

// 2 - Pass index value through the setItem()

<button (click)="setItem(item, i)" mat-raised-button >{{updateItem}} 
</button>


.ts File

// 1 - declare index in AppComponent Class

    updateItem = 'Save';
    myForm: FormGroup;
    items: any;
    selItem: any;
    index: number;      // <----------index

// 2 - Add "updateName(i)" and Update "setItem() && onSubmit()" functions

 onSubmit() {
   alert(this.items[this.index].name);
 }

updateName(i) {
   this.items[i].name = this.myForm.controls["name"].value;
}

setItem(item, i) {       // <----------- (item, i)
  this.selItem = item;
  this.index = i;
}

Answer 2

Решение

Динамическая форма с использованием * ngFor и отправка значений из нее

https://stackblitz.com/edit/angular-t5kbob?file=src%2Fapp%2Fapp.component.ts

app.component.html

<form id="myForm" [formGroup]="thisIsMyForm">
    <div [formArrayName]="'formArrayName'">
        <mat-card *ngFor="let x of data; let i = index">
            <div [formGroupName]="i">
                <mat-form-field>
                    <label>id:</label>
      <input formControlName="id" id="{{x.id}}" matInput value="{{x.id}}">
    </mat-form-field>
    <mat-form-field>
      <label>name:</label>
      <input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}"/>
    </mat-form-field>
    <button *ngIf="fomrControlState(i)" (click)="toggleEdit(i)">Enable Edit</button>
    <button *ngIf="!fomrControlState(i)" (click)="toggleEdit(i)">Save</button>
     </div>
  </mat-card>
  <button [disabled]="thisIsMyForm.get('formArrayName').enabled" (click)="onSubmit()">Submit Form</button>
  </div>
</form>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  thisIsMyForm: FormGroup;

  data = [
    { id: "one", name: "one" },
    { id: "two", name: "two" },
    { id: "three", name: "three" }
  ];

  constructor(private formBuilder: FormBuilder) {
    this.thisIsMyForm = new FormGroup({
      formArrayName: this.formBuilder.array([])
    })

    this.buildForm();
  }

  buildForm() {
    const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;

    Object.keys(this.data).forEach((i) => {
      controlArray.push(
        this.formBuilder.group({
          id: new FormControl({ value: this.data[i].id, disabled: false }),
          name: new FormControl({ value: this.data[i].name, disabled: false })
        })
      )
    })

    console.log(controlArray.controls)
  }

  toggleEdit(i) {
    const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
    console.log(controlArray.controls[i].value)
  }

  fomrControlState(i){
     const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
     return controlArray.controls[i].enabled
  }

  onSubmit() {
    // Here I would like to be able to access the values of the 'forms'
    console.log(this.thisIsMyForm.value)
  }

}