How to get value of input field in typescript file Angular 4

Question

 <div id="lists">
            <table id='mytable' cellspacing='0' cellpadding='0'>
                <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list; let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
                    <td class='default-field'>
                        <p class='para' *ngIf="selectedIndex!=i  ">{{i+1}}. {{item}}</p>
                    </td>
                    <td class="edit-field" *ngIf="selectedIndex==i   " >
                        <input type="text" class="myCl" [value]="val" >
                    </td>
                    <td class='btns'>

                    <input type='button' value='edit' class='edit-btn'  (click)='hidePara(item,i)' *ngIf="selectedIndex!=i">

                    <input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(item,i)'> 
                    <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
                    </td>
                </tr>
            </table>

        </div>

Above is my html code, i want to retrieve the value of input field when user click on save button, the hidePara1(item,i) function will execute, i want to get value of input field in hidepara1, how this can be possible.

 hidePara1(item,ii)
 {
  this.selectedIndex=-1;
  this.showHideP = !this.showHideP;  //for hiding paragraph
  this.tbox = !this.tbox;  //showing text box
  this.edt=!this.edt;  //hide edt button
  this.sbtn = !this.sbtn;  //display save button 

 }

Sangwin Gawande · Accepted Answer · 2017-11-16 07:30:50Z

8

First of all you need to import FormsModule in app.modules.ts in order to use ngModel

import { FormsModule } from '@angular/forms';

Then you can use [(ngModel)] to get the value in .ts file

HTML :

<input type="text" [(ngModel)]="inputText">

TS :

inputText :string = "I am sample text";

Your code becomes :

 <div id="lists">
            <table id='mytable' cellspacing='0' cellpadding='0'>
                <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list; let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
                    <td class='default-field'>
                        <p class='para' *ngIf="selectedIndex!=i  ">{{i+1}}. {{item}}</p>
                    </td>
                    <td class="edit-field" *ngIf="selectedIndex==i   " >
                        <input type="text" class="myCl" [value]="val" [(ngModel)]="item.inputText">
                    </td>
                    <td class='btns'>

                    <input type='button' value='edit' class='edit-btn'  (click)='hidePara(item,i)' *ngIf="selectedIndex!=i">

                    <input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(item,i)'> 
                    <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
                    </td>
                </tr>
            </table>

        </div>

edited Nov 16, 2017 at 7:30

answered Nov 16, 2017 at 6:10

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

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

6 Comments

kappo Over a year ago

i write console.log(item.value) in hidepara1 function it show me error.... I also use console.log(item) which give me undefined

Sangwin Gawande Over a year ago

Can you update hidePara1() function code in question ?

kappo Over a year ago

i have added function in question

Sangwin Gawande Over a year ago

I have updated answer, now change only (click)='hidePara(item,i)'

kappo Over a year ago

sangwin the input field is editable when i write console.log(item) in my para1 function it shows me previous value not new value

|

Syedur · Accepted Answer · 2017-11-16 06:03:58Z

0

You can use following code:

 <td class="edit-field" *ngIf="selectedIndex==i" >
      <input type="text" class="myCl" [(ngModel)]="val" >
 </td>

answered Nov 16, 2017 at 6:03

Syedur

4244 silver badges11 bronze badges

1 Comment

kappo Over a year ago

I tried this already and it's not working, because it require onclick within the same scope, so for this reason hidePara1(item,i) cannot use its value

Vignesh hawkeye · Accepted Answer · 2017-11-16 06:11:00Z

0

value is the property of this component by using Input field.use [(ngmodel)]

<input type="text" class="myCl" [(ngmodel)]="value[i]" >

get value from input field and store the value of array by ng model method then click the save button pass array valy and parameter to save

<input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(value,item,i)'>

answered Nov 16, 2017 at 6:11

Vignesh hawkeye

6813 bronze badges

7 Comments

kappo Over a year ago

It is showing this error: Can't bind to 'ngmodel' since it isn't a known property of 'input'. ("it-field" *ngIf="selectedIndex==i " > <input type="text" class="myCl" [ERROR ->][(ngmodel)]="value[i]" > </td>

Vignesh hawkeye Over a year ago

register formsmodule in app module

import { FormsModule } from '@angular/forms';  @NgModule({  imports: [     BrowserModule,     FormsModule]}, providers: [],   bootstrap: [AppComponent],   })   export class AppModule { }

kappo Over a year ago

drive.google.com/file/d/1PyIe4gZJqr7qjiyt7T3Z7D9qi_hCOjnW/…

Vignesh hawkeye Over a year ago

ngModel instead of ngmodel

Vignesh hawkeye Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

How to get value of input field in typescript file Angular 4

3 Answers 3

6 Comments

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related