0

i'm trying to edit item from a list. i'd like to show the clicked item in a modal (with all values so i can check for null id and use the modal for adding items too)

any id how i can do this?

what i currently have :

<div class="container">

  <!-- The table displaing the list of item -->
  <table class="table table-sm table-hover">
    <tr>
      <button class="btn btn-danger">
        <i class="fa fa-add"></i>Remove</button>
      <button class="btn btn-success" data-toggle="modal" data-target="#addOrUpdateModal">
        <i class="fa fa-add"></i>Add policy</button>
    </tr>
    <tr>
      <th class=""></th>
      <th>#</th>
      <th>Name</th>
      <th>Options</th>
    </tr>
    <tr *ngFor="let policy of dataSource | paginate: { itemsPerPage: 10, currentPage: p }">
      <td>
        <input type="checkbox"> </td>
      <td>{{policy.id}}</td>
      <td>{{policy.name}}</td>
      <td>
        <a class="btn" (click)="showForEdit(policy)" data-toggle="modal" data-target="#addOrUpdateModal">
          <i class="fa fa-pencil-square-o"></i>
        </a>
        <a class="btn text-danger" (click)="delete(policy.id)">
          <i class="fa fa-trash-o"></i>
        </a>
      </td>
    </tr>
  </table>

</div>
<!-- Pagination directive -->
<div class="container">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>


<!-- the modal i'd like to use for add and update data -->

<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addOrUpdateModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">

            <!-- The inputs i want to fill with clicked item -->
            <input type="hidden" class="form-control" value=""/>
            <input type="text" class="form-control" placeholder="Name" value=""/>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="addOrUpdate()">Do smthg</button>
      </div>
    </div>
  </div>
</div>

i don't know how to get the data passed to the modal since the modal is not in the ngFor. should i pass the data to my controller, then make the controller display the modal somehow...?

(new to Angular5 / typescript and javascript. like.. 3 weeks exp in all of that so, sorry for dumb questions...)

although : if someone have a great book like "angular and typescript for newbies", i buy it right now! :D

j0w
  • 505
  • 2
  • 12
  • 32

1 Answers1

1

Try this,Here i am used two way data binding for this.

Typescript file,

    //here declared variable
    name:any;
    id:number;

    showForEdit(policy){
      //here you can access your *ngFor looped dataSource data like (policy.id, policy.name)
      this.name=policy.name; //here iam assinging name value to variable.
      this.id=policy.id;
    }

   addOrUpdate(){
      console.log("Your Name Data here",this.name);
      console.log("Your Id Data here",this.id);
   }

Html file,

 <form role="form">
      <div class="form-group">            
            <input type="hidden" class="form-control" name="id" [(ngModel)]="id" value=""/>
            <input type="text" class="form-control" name="name" [(ngModel)]="name" placeholder="Name" value=""/>
       </div>
 </form>

For more study related details visit official documents here.Here is the official documents is very useful for start learn angular.

https://angular.io/guide/forms

Edit:-

Make sure you have to added app.module.ts file,

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

 imports: [
    FormsModule, //here
    ReactiveFormsModule,
 ]

For Reset,

this.name='' 
this.id='';

if you use form use like this,

this.form_name.reset();

Reference site,

Reset input value in angular 2

Karnan Muthukumar
  • 1,843
  • 1
  • 8
  • 15
  • it seems to work, thanks for the tips ! i just had to add name="id" and name="name" in the inputs. now, is there a way to clear the data when the modal is closed? – j0w Jul 11 '18 at 14:06
  • yeah it is possible. use like this. this.name='' and this.id=''; like this thats all. If you use form simple do this.form_name.reset(); – Karnan Muthukumar Jul 11 '18 at 14:08
  • here is an example for you.https://stackoverflow.com/questions/45279471/reset-input-value-in-angular-2 – Karnan Muthukumar Jul 11 '18 at 14:09
  • thanks for your update :) for the reset thing, what i meant is : is that possible to reset the inputs when you loose focus of the modal? like, technically, if i click somewhere out of the modal it closes it, but the id and name value in component still are the one wich were binded – j0w Jul 11 '18 at 14:23
  • Oops, nevermind, just figured it out... Thanks for your help! :) – j0w Jul 11 '18 at 14:27