Get value from Input text field in angular 5

Question

it seems to be an easy question, but nothing what i found worked for me. I have a standard input field in my component.html:

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

So when the user now submitts the form, how do i get the value he typed into the field? If i do a simple console.log(this.serial) in my onSubmit() function, i get nothing. I declared serial: String; in my component.ts

Suren Srapyan · Accepted Answer · 2018-01-31T08:05:14.407

24

You have wrong bound. You need banana-in-box binding [(ngModel)]="serial" instead of [ngModel]="serial"

() in the binding will update serial model everytime when the input will be changes. From input into model

Single [] will just bind the data of serial if it will be changed by code manually. This will cause to one-way binding - from model into input.

As you guess - together [()] they will make two-way binding.

edited Jan 31 '18 at 08:05

answered Jan 31 '18 at 07:57

Suren Srapyan

66,568
14
114
112

3

You are welcome. But try to understand what is going. This is one of the core concepts in Angular – Suren Srapyan Jan 31 '18 at 08:00
How did you retrieve the value from type script ? – Illep Jun 21 '18 at 17:54
1

@Illep In typescript class you already have a property with name `serial` which is the bound one. So you need just to access this property and get the latest value – Suren Srapyan Jun 21 '18 at 19:10

score 8 · Answer 2 · answered Oct 18 '18 at 10:00

8

this is one way binding. from view to controller.

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

file code.component.ts

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

answered Oct 18 '18 at 10:00

m.a. sanjaya

81
1
2

Thank you for this simple example. Much appreciated. – specialk1st Feb 15 '19 at 17:23

Get value from Input text field in angular 5

2 Answers2