Angular 2 | Typescript | Bind value of a span to a textbox

Question

I have an array that I am looping over to create a table of records. Now, for each row in the table, I have provided an 'EDIT' button and a Cancel button. Clicking on the edit button will show textboxes populated with the actual values and will give the user an option to save. Clicking the cacncel button will collapse the editable row and will display the actual table row. Now, I am using the following arrangement to facilitate this:

 <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
     <td>
         <span [hidden]="edit && i==selectedRow" [innerText]="item.firstName"></span>
         <span [hidden]="i!==selectedRow"><input type="text" #fn id="fn" name="fn" [value]="item.firstName"/></span>
     </td>

Now, the problem : 1. I click the EDIT button and make some modifications to the textbox value - 2. Then I click on the cancel button. 3. I again click on the EDIT button. Now, I was hoping to see the actual data in the textbox. Instead I see the modified value (per step 2).

I want that the value of textbox should always refresh to the value in the everytime I click on EDIT button.

EDIT: I've seen that if instead of using [hidden], I use

<span *ngIf="i==selectedRow"><input type="text" #fn id="fn" name="fn" [value]="item.firstName"/></span>

then I am able to get the textbox value reset, but then I am unable to access the textbox value in the Typescript file. I access the values file like this:

<img (click)="updateContact(fn.value) .../>

EDIT: Updated with the complete table:

<tbody>
                        <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
                            <tr><td>ass</td><tr>
                            <td>
                                <span *ngIf="i !== selectedRow" [innerText]="item.firstName"></span>
                                <span *ngIf="edit && i == selectedRow">
                                    <input (blur)="updateEditableValues(fn.value, undefined)" type="text" #fn [value]="item.firstName"/>                                     
                                </span>
                                <!--<input type="hidden" #firstName [(ngModel)]="firstNameVal" />-->
                            </td>
                            <td>
                                <span *ngIf="i !== selectedRow" [innerText]="item.lastName"></span>
                                <span *ngIf="edit && i == selectedRow" ><input (blur)="updateEditableValues(undefined, ln.value)" type="text" #ln value="{{item.lastName}}"/></span>
                                <!--<input type="hidden" #lastName [(ngModel)]="lastNameVal" />-->
                            </td>
                            <td>
                                {{item.email}}
                                <span [hidden]="true"><input  #email type="text" value="{{item.email}}"/></span>
                            </td>
                            <td>{{item.contactStatus}}</td>
                            <td>
                                <!--<a [hidden]="edit && i==selectedRow" href="javascript:void(0);" (click)="setClickedRow(i)">EDIT</a>-->
                                <img height="20" width="20" *ngIf="i !== selectedRow" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-64.png"
                                    (click)="setClickedRow(i)" />
                                <div *ngIf="edit && i == selectedRow" >
                                    <img (click)="updateContact(i, fn.value, ln.value)" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/48/Dialog-Apply-48.png"
                                    />
                                    <img (click)="closeEdit()" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/common-toolbar/36/Cancel-48.png"
                                    />
                                </div>
                            </td>

                        </tr>
                    </tbody>

Update 2

updateContact(rowIndex, firstName, lastName, email){

      alert(firstName)      
      alert(lastName)      
  this.data.forEach((item, index) => {
    if (item.email === email) {
      this.data[index].firstName = firstName;
      this.data[index].lastName = lastName;
      this.edit = false;
      this.selectedRow = -1;  
      return false;  
    } 

});

}

I think youn need to remove or edit <tr><td>ass</td><tr> as it's never closed </tr>, also what is "updateEditableValues(fn.value, undefined)" ? — Vega
– Vega, Commented Aug 13, 2017 at 15:23
value="{{item.lastName}}" and value="{{item.email}}" is not correct — Vega
– Vega, Commented Aug 13, 2017 at 15:26

Vega · Accepted Answer · 2017-08-13 15:31:18Z

2

I arranged your code a little.

    <tr *ngFor="let item of mf.data; let i = index" [class.active]="i === selectedRow">
         <td>
             <span *ngIf="!edit"> {{item.firstName}}> </span>
             <span *ngIf="edit && i===selectedRow">
                 <input type="text" #fn [value]="item.firstName"/>
                <button (click)="update(item.id, fn.value)"/> Save</button>
             </span>
         </td>
     </tr>
...

and in update() you actually update the array value. You would need ids in mf.data to identify which row it is:

    update(id, value)
    {
      this.edit=false;
      //something like this
      this.md.data[id].firstName=value;
    }

UPDATE: with your updated code, it should be:

<tbody>
           <tr *ngFor="let item of mf.data; let i = index" [class.active]="i == selectedRow">
               <td>
                   <span *ngIf="i !== selectedRow" [innerText]="item.firstName"></span>
                   <span *ngIf="edit && i == selectedRow">
                       <input (blur)="updateEditableValues(fn.value, true)" type="text" #fn [value]="item.firstName" />
                   </span>
                   <!--<input type="hidden" #firstName [(ngModel)]="firstNameVal" />-->
               </td>
               <td>
                   <span *ngIf="i !== selectedRow" [innerText]="item.lastName"></span>
                   <span *ngIf="edit && i == selectedRow">
                       <input (blur)="updateEditableValues(ln.value, false)" type="text" #ln [value]="item.lastName" />
                   </span>
                   <!--<input type="hidden" #lastName [(ngModel)]="lastNameVal" />-->
               </td>
               <td>
                   {{item.email}}
                   <span [hidden]="true">
                       <input #email type="text" [value]="item.email" />
                   </span>
               </td>
               <td>{{item.contactStatus}}</td>
               <td>
                   <!--<a [hidden]="edit && i==selectedRow" href="javascript:void(0);" (click)="setClickedRow(i)">EDIT</a>-->
                   <img height="20" width="20" *ngIf="i !== selectedRow" src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/pencil-64.png"
                       (click)="setClickedRow(i)" />
                   <div *ngIf="edit && i == selectedRow">
                       <img (click)="updateContact(i, fn.value, ln.value)" height="20" width="20"
   src="https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/48/Dialog-Apply-48.png"
                       />
                       <img (click)="closeEdit()" height="20" width="20" src="https://cdn4.iconfinder.com/data/icons/common-toolbar/36/Cancel-48.png"
                       />
                   </div>
               </td>

           </tr>
   </tbody>

I corrected updateEditableValues() that will take boolean in the second argument and if it's true it will be firstnname and false lastname will be updated. you need to correct it. It's not important for the question, but more elegant way

edited Aug 13, 2017 at 15:31

answered Aug 12, 2017 at 8:32

Vega

28.8k28 gold badges121 silver badges151 bronze badges

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

12 Comments

va1b4av Over a year ago

Yes, inside updateContact, fn is inaccessible or undefined.

va1b4av Over a year ago

I do not use a @Viewchild. I also updated the original post with code for updateContact()

va1b4av Over a year ago

No..Its in accessible. The moment I remove the *ngIf conditions from the <input>, I can access fn.

Vega Over a year ago

I am probably understanding now what's going on or at least partially. ngIf removes the element from the DOM. So it could be inaccessible. but I don't see why because the button and the input have the same ngif condition, so both are present. Could you try re-replace ngIf by [hidden] as it doesn't remove from the DOM

Vega Over a year ago

Bravo! I am so glad that you got it done and very pleased that I was able to help you! I really enjoyed it and you are very welcome :)

|

Collectives™ on Stack Overflow

Angular 2 | Typescript | Bind value of a span to a textbox

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related