How to get value of a textbox inside a div using typescript?

Question

I have my html like this.

<div id="series1">
    <div class="col-md-6">
        <label for="Mark">Mark</label>
        <input type="text" id="mark" class="shortTextbox" (blur)="signalSelected('mark')" />
    </div>
</div>

I want to get the value of mark value entered in the text box. This html code repeats for me on a button click. Every time the button is clicked id changes to series2 and series3 and so on.

Currently in typescript file I am taking value like

var val = (<HTMLInputElement>document.getElementById(selection)).value

But this won't give me the value selected for the respective series id. Can you please provide how to get the mark value based on id(series1, series2)...

You are using Angular2 so why don't you use binding?

Hung Cao
– Hung Cao

2017-03-15 22:42:05 +00:00
Commented Mar 15, 2017 at 22:42 — Hung Cao
– Hung Cao, Commented Mar 15, 2017 at 22:42

Dawlatzai Ghousi · Accepted Answer · 2017-03-16 07:01:10Z

1

Just add [(ngModel)]="mark" in your input field and a name, your html component may look like this:

<div id="series1">
     <div class="col-md-6">
         <label for="Mark">Mark</label>
          <input type="text" id="mark" class="shortTextbox" [(ngModel)]="mark" (blur)="signalSelected('Mark')" name="mark" />
      </div>
</div>

and in your component.ts define a variable and then get it is value like this:

...
mark: string;

signalSelected (markVal: string){
    markVal = this.mark
    console.log(markVal); // it is the value
}

edited Mar 16, 2017 at 7:01

answered Mar 16, 2017 at 6:50

Dawlatzai Ghousi

3,9762 gold badges23 silver badges27 bronze badges

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

3 Comments

code1 Over a year ago

If I pass signalSelected('Mark'), Mark is a just a string value which you are assigning in the method

code1 Over a year ago

signalSelected (markVal: string){ markVal = this.mark

code1 Over a year ago

I tried like (blur)="signalSelected(event) " and in the method I got the value as event.currentTarget.value. This worked.

Günter Zöchbauer · Accepted Answer · 2017-03-16 07:18:09Z

0

You can use ngModel

<input type="text" [(ngModel)]="myFieldInComponentClass"

If you have a field myFieldInComponentClass like

class MyComponent {
  myFieldInComponentClass:String;

this field will have the value assigned whenever the value in the input changes (and also the other way around).

You can make it a getter/setter to execute code on change

  private _myFieldInComponentClass:String;
  set myFieldInComponentClass(value :String) {
    this._myFieldInComponentClass = value;
    // other code
  }
  get myFieldInComponentClass() {
    return this._myFieldInComponentClass;
  }

edited Mar 16, 2017 at 7:18

answered Mar 16, 2017 at 6:39

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

How to get value of a textbox inside a div using typescript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related