Update array from a form input field-CodePudding

Good day.

I have a array where I am trying to perform an update. I have a basic input field which is used to add a new item to the array. I want the same input field to used for the update. When the edit button is clicked, it populates the field based on the item I clicked on and then when I click update, the array is updated with the new item.

Here is what I have so far.

app.component.html

<div class="container">
  <div class="jumbotron text-center">
    <h1>Angular CRUD</h1>
  </div>
  <div class="container">
    <form class="form-inline custom-centered" name="itemForm">
      <label for="item">Add an Item:</label>
      <input type="text" class="form-control" name="Value" id="Value" #item>
      <button type="submit" class="btn btn-success" (click)="create(item.value); item.value=''" style="width: 80px;">Add</button>
    </form>
  </div>
</div>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of collection; let id = index">
      <td>{{item.name}}</td>
      <td>
        <button (click)="editItem(id)" class="btn btn-info btn-sm mr-1">Edit</button>
        <button (click)="deleteItem(id)" class="btn btn-danger btn-sm">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

app.component.ts

export class AppComponent {

  collection: any = [];

  create(item: any) {
    this.collection.push({
      name: item,
    });
    return;
  }

  editItem(){
  }

  deleteItem(id: any) {
    this.collection.splice(id, 1);
  }
}

Can someone provide some guidance on how to approach this please.

Is there any built in methods I can use to bind the 'selected item' to the input field?

Thanks in advance.

CodePudding user response：

I would suggest to use reactive forms, it would look something like this:

export class AppComponent {
  collection: any = [];
  name = new FormControl('');
  currentlySelectedId: number;

  create() {
    this.collection.push(this.name.value);
    console.log(this.collection)
    this.name.reset();
    return this.collection;
  }

  editItem(id: any){
    this.name.setValue(this.collection[id]);
    this.currentlySelectedId = id;
  }

  update(){
    this.collection.splice(this.currentlySelectedId, 1, this.name.value);
    this.name.reset();
    console.log("update collection", this.collection);
  }

  deleteItem(id: any) {
    this.collection.splice(id, 1);
  }
}

<div class="container">
  <div class="jumbotron text-center">
    <h1>Angular CRUD</h1>
  </div>
  <div class="container">
    <form class="form-inline custom-centered" name="itemForm">
      <label for="item">Add an Item:</label>
      <input type="text" class="form-control" [formControl]="name" />
      <button
        type="submit"
        class="btn btn-success"
        (click)="create(name)"
        style="width: 80px;"
      >
        Add
      </button>
      <button
        type="submit"
        class="btn btn-success"
        (click)="update(name)"
        style="width: 80px;"
      >
        Update
      </button>
    </form>
  </div>
</div>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of collection; let id = index">
      <td>{{ item }}</td>
      <td>
        <button (click)="editItem(id)" class="btn btn-info btn-sm mr-1">
          Edit
        </button>
        <button (click)="deleteItem(id)" class="btn btn-danger btn-sm">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

Notice the [formControl] in the html file and the name = new FormControl(''); in the ts file. I also separated the onclick functions for creating and updating. Also personally, I think you should allow for editing in place, meaning once the user clicks edit the field that shows the value is then editable, instead of using the top input as the edit field for all values.