Search code examples
angularinputdata-bindingngmodel

angular2 two-way binding doesn't updated as I enter the string

I am new to angular2 and I am hoping someone can help me with a basic thing that why my two way binding is not working. I have this super simple code in my html and I have added following in my module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule} from '@angular/forms';

in html:
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

The problem that I have is that as I enter a string in the input box the "Hello {{username}}" doesn't get updated. But when I just click outside of the input box the "Hello {{username}}" will be updated with the entered value.

Please let me know what magic I am missing here :(. thanks

Solution

  • I think you need to add ngModelOptions or name

    <input [(ngModel)]="username" [ngModelOptions]="{standalone: true}">

    or

    <input [(ngModel)]="username" name="username">