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

Answer 1

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.