How to keep object values in a form when updating object angular 5+?

Question

I am using an expansion panel which I got from here. I am using a loop to create each row and I would like for when the panel is expanded it shows the data from the current row to be edited. I am new to angular and what I have works, it updates the database. But what I have does not seems like the best solution because when the form opens it opens with the selected object data but as a place holder then the data becomes the label for the Textbox and the Textbox becomes empty. Is there a way to bind the current value to the Textbox value and not the placeholder and if I focus on the Textbox it keeps the text for me to edit.

Html:

<tr *ngFor="let search of searches">
<mat-expansion-panel (opened)="panelOpenState2 = true" (closed)="panelOpenState2 = false">
  <mat-expansion-panel-header>
    <td><span class="badge">3</span></td>
    <td>{{ search.name }}</td>
    <td><button color="warn" (click)="deleteSearch(search._id)" class="btn btn-primary float-right">Del</button></td>
  </mat-expansion-panel-header>
  <td>
    <mat-form-field>
      <input matInput placeholder="{{ search.name }}" [(ngModel)]="inputValue" name="name" type="text" class="form-control rounded-0" required>
    </mat-form-field>
  </td>
  <td><button (click)="updateSearch(search._id, inputValue)" class="btn btn-primary float-right">Edit</button></td>
</mat-expansion-panel>
</tr>

TypeScript Function:

updateSearch(id, name) {
    this.searchService.updateSearch(id,name,'dd')
      .subscribe(
        res => {
          console.log(name+ 'fjjf')
          console.log(res)
          this.fetchSearches();
        },
        err => console.log(err)
      )
  }

Ankit Sharma · Accepted Answer · 2018-08-19 15:53:02Z

1

You need to put [(ngModel)]="search.name" in your code.

Try the below code:-

<mat-form-field>
      <input matInput placeholder="Name" [(ngModel)]="search.name" name="name" type="text" class="form-control rounded-0" required>
</mat-form-field>

Also don't forget to update your (click) binder, something like below:-

(click)="updateSearch(search)"

And your typescript function could be updated as below:-

  updateSearch(search) {
    this.searchService.updateSearch(search._id, search.name, 'dd')
      .subscribe(
        res => {
          console.log(name+ 'fjjf')
          console.log(res)
          this.fetchSearches();
        },
        err => console.log(err)
      )
  }

edited Aug 19, 2018 at 15:53

answered Aug 19, 2018 at 15:47

Ankit Sharma

1,70410 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dev Over a year ago

Thanks, is there a way to make only the value in the Textbox get updated until I hit the edit button(because I am using the same value for the label of the panel it updates live and if I collapse the panel it stays to the edited value)?

Ankit Sharma Over a year ago

@Decoder94 Is there only one inputValue or multiple for each search row?

Dev Over a year ago

There are multiple searches, eg 4 rows, and if I click one the others collapse. if I open one I will be able to edit 'name' , 'type'... and other fields but because I use the name property as mat-expansion-panel-header if I open row 3 and edit it and collapse without clicking edit the mat-expansion-panel-header stays as the edited value.

Ankit Sharma Over a year ago

@Decoder94 Try this stackblitz.com/edit/… . It may help you on how to achieve what you need to do.

Collectives™ on Stack Overflow

How to keep object values in a form when updating object angular 5+?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related