Update array from a form input field

Question

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.

what excatly is your problem? you want to open the sam form with edit as well or something else? — vaira
– vaira, Commented Nov 28, 2021 at 11:27
I would suggest you to use reactive form, there you will get full control over the form and it would be much easier — vaira
– vaira, Commented Nov 28, 2021 at 11:29

Stoobish · Accepted Answer · 2021-11-28 13:38:04Z

2

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.

edited Nov 28, 2021 at 13:38

answered Nov 28, 2021 at 13:08

Stoobish

1,3927 silver badges25 bronze badges

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

3 Comments

Stoobish Over a year ago

@Nathan Let me know if you have any questions and if it works for you!

Nathan Over a year ago

It works as expected. After adding a item or updating, the input field is not cleared. Seeing that I am using reactive forms, can I use the reset() method to clear the field?

Stoobish Over a year ago

yes, you can just set this.name.reset(); in the create and update functions. I've updated the code above. Please kindly accept the answer if it works for you.

Collectives™ on Stack Overflow

Update array from a form input field

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related