can't get values of current item on submit event

Question

I have a json array of objects that I bind to html form and mat-expansion-panel view. I'm trying to get changed value of name input field but in any case it returns the initial value. e.g. If I change name1 to name111 and press submit button I see name1 in the alert window. If use this.myForm.controls["name"].value it returns last changed value but it is incorrect because I could press save button of another item.

How to get all values of input fields of the current item on submit event?(include changed values)

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

example:

1)I get

id1 | name = name1 | save button1

id2 | name = name2 | save button2

id3 | name = name3 | save button3

2) I change

id1 | name = changedname1 | save button1

id2 | name = changedname2 | save button2

id3 | name = changedname3 | save button3

3) I press save button2

4)I see 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;
  }

}

you are setting the entered values to this.curIdx and this.setItem not to the id and name of form group how do u think they get updated — madhavsai bhushan, May 01 '19 at 12:52
@madhavsai bhushan, thanks, i'll learn the valueChanges method. I want to get all values of input fields after a user press `save` button. User could change multiple input fields on the form at any item, but after he press `save`(e.g. item with id2 save button) I catch only values of `id2` item. `curIdx` is not nesessery here — John, May 01 '19 at 13:15
onsubmit(){console.log(this.myForm.values)} this will give you the all the form values — madhavsai bhushan, May 01 '19 at 14:10
and if u want to update only certain then use patch Value method — madhavsai bhushan, May 01 '19 at 14:11

John · Answer 1 · 2019-05-01T17:53:08.610

The solution is

Dynamic form using *ngFor and submitting values from it

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)
  }

}

md_salm · Answer 2 · 2019-05-03T09:33:13.397

0

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;
}

edited May 03 '19 at 09:33

answered May 02 '19 at 07:42

md_salm

459
5
9

unfortunately, it returns last changed item name. if you did not change the item, the alert window shows "undefined". If you change the item with `id2` and then press the button on the item with `id3` you see the name of the item with `id2`, but it should be `name3`. – John May 02 '19 at 14:17
I have edited the code and its workin fine now. Try this one and let me know if you still having problem!! – md_salm May 03 '19 at 07:47

can't get values of current item on submit event

2 Answers2