ngModel doesn't work properly in Angular 4

Question

I faced a problem with ngModel directive. I have an input <td><input type="text" ([ngModel])="desc"></td> in which I assigned value of that input to the variable called desc. Then in component I just want to print it in the console by:

addItem(){
    console.log('=======', this.desc);
  }

The method addItem() is decalred in html file below the input:

   <td>
            <i
              class="fa fa-plus-square add-button"
              (click)="addItem()">
            </i>
   </td>

The thing which I get back is: ======= undefined in the console. Can anyone tell me why I got this? In diffrent place of this app I'm also using ngModel and everything works good

Mehdi Benmoha · Accepted Answer · 2017-09-24 13:39:28Z

2

The syntax of the data-binding operators ( and [ is wrong, if you want dual binding to work properly, you need to remember the famous sentence "Banana in a box" so you need to write [(ngModel)] it's like a banana in a box [()] .

For information, [ is for view to controller binding and ( for the inverse.

answered Sep 24, 2017 at 13:39

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

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

2 Comments

bielas Over a year ago

Ok, so I have changed a little bit and now it looks like: <td><input type="text" [(ngModel)]="newItem.description"></td> and created just a new object in component called newItem. Is there any way to omit the problem with Cannot read property 'description' of undefined because of the field description in newItem which has never been created?

Mehdi Benmoha Over a year ago

Of course, but you will have to create a class that contains all the properties of newItem. Let's say that your class is called Item, so in your controller, you just have to instantiate an object of that class: newItem : Item = new Item();

Collectives™ on Stack Overflow

ngModel doesn't work properly in Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related