Retrieving data from an Angular 5 Input text field

Question

Retrieving data from an Angular 5 Input text field

I have been struggling with what seems like a simple question, but none of the solutions I found seem to work for me. In my component.html file, I have a standard input field:

<div class="form-group">
    <label>Serial</label>
    <input type="text" name="serial" id="serial" [ngModel]="serial" [value]="serial" class="form-control">
</div>

When the user submits the form, how do I retrieve the value they typed into the field? If I try console.log(this.serial) in my onSubmit() function, it logs nothing. I have declared serial: String; in my component.ts file.

angular typescript mean-stack

Answer 1

Answer №1

The binding you are using is incorrect. You should use banana-in-box binding syntax [(ngModel)]="serial" instead of [ngModel]="serial"

The presence of () in the binding will automatically update the serial model whenever there is a change in the input. This ensures data synchronization from the input to the model.

On the other hand, single square brackets [] will only bind the data of serial if it is manually changed in the code. This results in one-way binding, specifically from the model to the input.

Combining both types of brackets as [()] creates two-way binding, allowing data changes to be reflected bidirectionally between the model and the input.

Answer 2

The binding you are using is incorrect. You should use banana-in-box binding syntax [(ngModel)]="serial" instead of [ngModel]="serial"

The presence of () in the binding will automatically update the serial model whenever there is a change in the input. This ensures data synchronization from the input to the model.

On the other hand, single square brackets [] will only bind the data of serial if it is manually changed in the code. This results in one-way binding, specifically from the model to the input.

Combining both types of brackets as [()] creates two-way binding, allowing data changes to be reflected bidirectionally between the model and the input.

Answer 3

Answer №2

This demonstrates a single-way data binding process from the view to the controller.

See below for the code in the file named code.component.html:

<label >Code</label>
<input (input)="tcode=$event.target.value" type="text" class="form-control">
<button class="btn btn-success" (click)="submit()">Submit</button>

Now, let's take a look at the content of code.component.ts:

tcode : string;
submit() {
    console.log("the code :" + this.tcode);
}

Answer 4

This demonstrates a single-way data binding process from the view to the controller.

See below for the code in the file named code.component.html:

<label >Code</label>
<input (input)="tcode=$event.target.value" type="text" class="form-control">
<button class="btn btn-success" (click)="submit()">Submit</button>

Now, let's take a look at the content of code.component.ts:

tcode : string;
submit() {
    console.log("the code :" + this.tcode);
}

Retrieving data from an Angular 5 Input text field

Answer №1

Answer №2

Similar questions

Exploring the concept of object inheritance in Angular 5 with Typescript

Opening an external link from the Side Menu in Ionic4: A step-by-step guide

Improve page loading speed by removing JavaScript and CSS that block rendering of above-the-fold content, specifically focusing on Angular JS

In what way does Ionic determine the URL for input and send the password-protected email for logging in based on that URL?

Encountering MIME type error (text/html) during Angular project deployment

What is the purpose of the 'unique' keyword in TypeScript?

Vercel encountered issues with "validating code quality and type correctness" during deployment but was successful when performed locally

Cordova Emulate Android cannot locate Gradle or an installed Android Studio, despite their presence

Encountering a compilation error due to a Typescript assignment

TS7016: No declaration file was found for the module named 'rxjs'

Angular 1.5 component causing Typescript compiler error due to missing semi-colon

Express is encountering an issue where it is unable to interpret the property 'name' of an undefined element coming from

Do changes in Input fields reflect in the parent component?

What is the method for assigning a value to a reactive form in Angular?

Struggling to access properties of a javascript object while trying to slice it within table pagination

In my efforts to reset the TypeORM MySQL database upon server shutdown in NestJS, I am exploring different approaches

Angular templates do not support text interpolation within ng-template tags

Using Observable.subscribe in Angular 8 empties my user class

Cypress has the ability to exclude certain elements from its testing

Leveraging Shared and CoreModule in Ionic