What is the method to retrieve the value of a textbox located inside a div with TypeScript?

Question

What is the method to retrieve the value of a textbox located inside a div with TypeScript?

Here is my HTML structure:

<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 am trying to retrieve the value entered in the text box with ID "mark". Each time a button is clicked, the ID changes to series2, series3, and so on.

Currently, in my TypeScript file, I am fetching the value like this:

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

However, this does not give me the value for the respective series ID. Can someone please provide guidance on how to retrieve the mark value based on the ID (series1, series2)...

angular typescript

Answer 1

Answer №1

To incorporate two-way data binding, simply include [(ngModel)]="mark" in your input field, along with a name attribute. Your HTML component code could resemble the following:

<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>

In your component.ts file, create and assign a variable, then access its value like so:

...
mark: string;

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

Answer 2

To incorporate two-way data binding, simply include [(ngModel)]="mark" in your input field, along with a name attribute. Your HTML component code could resemble the following:

<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>

In your component.ts file, create and assign a variable, then access its value like so:

...
mark: string;

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

Answer 3

Answer №2

To utilize two-way data binding, you can employ the ngModel directive.

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

If you declare a field named myFieldInComponentClass within your component like this:

class MyComponent {
  myFieldInComponentClass: String;

The value of this field will automatically update whenever the input value changes, and vice versa.

If you wish to execute additional code on change, you can transform it into a getter/setter.


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

Answer 4

To utilize two-way data binding, you can employ the ngModel directive.

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

If you declare a field named myFieldInComponentClass within your component like this:

class MyComponent {
  myFieldInComponentClass: String;

The value of this field will automatically update whenever the input value changes, and vice versa.

If you wish to execute additional code on change, you can transform it into a getter/setter.


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

What is the method to retrieve the value of a textbox located inside a div with TypeScript?

Answer №1

Answer №2

Similar questions

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

Leveraging observables for loading fbx files in three.js

Angular 5 Service Unit Testing for UPDATE Function

Visual Studio Code is encountering issues when trying to start a Node application

Angular is encountering a situation where code is being executed before properly waiting for the response from an asynchronous

Using ngFor to dynamically populate drop-down options from a key value object in Angular 2

Personalized Firefox Scrollbar - Rounded Corners

I am familiar with the other posts, and there seems to be no directive specified with "exportAs" set to "ngForm"

Using Typescript to return a specific data type

The parameters 'event' and 'payload' do not match in type

Retrieve the structure from a React application

The issue encountered is a Type Error, as the function crypto.randomUUID() is

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Encountered an issue with the Dynamic Form: TypeError - The property 'value' is undefined and cannot be read

Assign the value of a state by accessing it through a string path key within a complexly

I'm experiencing an issue with redirect in Nextjs that's causing an error message to appear. The error reads: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Running `ng start angularProject` or `npm install` will generate additional files in the project's

Exploring the JSON Array in Angular5 with the power of ngFor

Typescript: Issue encountered with Record type causing Type Error

What is the best way to dynamically render a component and interact with its methods within Angular?