Input type text binding dynamically in Angular

Question

I have a simple app which adds the textbox value to listbox when enter key is pressed in textbox. Here is my html code

<input type="text" value="{{ myText }}" (keypress)="keyEvent($event)"  /> 
<select multiple="multiple" >
  <option *ngFor="let item of itemsList">
    {{item}} 
  </option>
</select>

here is my typescript component code

export class AppComponent {
  title = `hello world app !`;
  myText ='';
  itemsList = [];constructor() { 
  }

  ngOnInit() {
  }

  keyEvent(event)
  {
    if(event.keyCode === 13)
    {
      event.preventDefault(); // Otherwise the form will be submitted
      this.itemsList.push(this.myText);
    }
  }

myText value is not getting updated . the value is always null.

Please help to figure out what is that i am missing while binding myText.

P.S. · Accepted Answer · 2021-07-27 13:02:10Z

9

It's not updating because you need TWO WAY data binding via ngModel:

<input type="text" [(ngModel)]="myText" (keypress)="keyEvent($event)" />

For more info: https://angular.io/api/forms/NgModel

edited Jul 27, 2021 at 13:02

answered Sep 25, 2017 at 15:57

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Peekay Over a year ago

after adding [(ngModel)]="myText" html page goes blank :(

Peekay Over a year ago

@Comercial Suicide No errors .. when i remove the outer braces atleast the screen is visible but still the binding doesnt happen ----------- like this.(ngModel)="myText"

P.S. Over a year ago

@Peekay, the ngModels two way binding will work only with "banana in box" notation [()]. Sorry, I can't really say why you're getting the blank page when using [(ngModel)] without live example =(

P.S. Over a year ago

@Peekay, what is the p attribute on your input?

Shahbaz Aamir Over a year ago

@Peekay you need to add imports in component.ts import { NgModel , NgForm } from '@angular/forms';

Collectives™ on Stack Overflow

Input type text binding dynamically in Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related