getting value from ngModel and storing it in object-CodePudding

i am doing inline editing in my app, i am getting data from API and storing value inside input with ngModel, i have custom object (editCat and editCarSub) which i want to send to API, i want to get value from input and store it inside my object, how can i achieve that?

here is my stackblitz

.ts

  done(id, index) {
    this.editCat = {
      carPartCategoryId: id,
      name: '', //input value here
    };
    this.hidemeSub[index] = false;
    console.log(this.editCat);
  }

.html

<div *ngFor="let item of items; let index = index">
  <div >
    <span [hidden]="hidemeSub[index]">{{ item.name }}</span>
    <div
      
      (click)="hidemeSub[index] = !hidemeSub[index]"
      [hidden]="hidemeSub[index]">
      Edit
    </div>
  </div>
  <div >
    <input type="text" [hidden]="!hidemeSub[index]" [(ngModel)]="item.name" />
    <div
      
      [hidden]="!hidemeSub[index]"
      (click)="done(item.carPartCategoryId, index)">
      Done
    </div>
  </div>
</div>

CodePudding user response：

Pass item name in done function

(click)="done(item.carPartCategoryId, item.name, index)"

and then

done(id, name, index) {
  this.editCat = {
    carPartCategoryId: id,
    name: name, //input value here
  };
  this.hidemeSub[index] = false;
  console.log(this.editCat);
}