Angular 2 two way data binding with ngModel

Question

First off I am new to Typescript and Angular 2 and this seems like an obvious answer but I can't seem to get it to work. I have the following model

export interface IBrand {
    brandID: number;
    name: string;
    image: string;
}

Then I have the component class

import { Component, OnInit }  from '@angular/core';
import { Router, RouteParams } from '@angular/router-deprecated'
import { bootstrap } from '@angular/platform-browser-dynamic';

import { IBrand } from './brand';
import { BrandService } from './brand.service';

@Component({
    selector: 'data-bind',
    templateUrl: 'app/dashboardApp/brands/brand-list.component.html',
    styleUrls: ['app/dashboardApp/brands/brand-list.component.css']
})

export class BrandListComponent implements OnInit {
    brands: IBrand[];
    errorMessage: string;
    newBrand: IBrand;
    pageTitle: string = 'Brands';

    constructor(private _brandService: BrandService,
        private _router: Router) {
    }

    ngOnInit(): void {
        this._brandService.getBrands()
            .subscribe(
            brands => this.brands = brands,
            error => this.errorMessage = <any>error);
    }    
}

And then I have the following html

<div class="form-group">
    <label for="brandName">Brand:</label>
    <input type="text" class="form-control" placeholder="Name" id="brandName" [(ngModel)]="newBrand.name" />
</div>

I can't get the properties of IBrand to work successfully and I get the error

platform-browser.umd.js:962 ORIGINAL EXCEPTION: TypeError: Cannot read property 'name' of undefined

However I can bind it easily to something like pageTitle. Any ideas that can point me in the right direction?

Derked · Accepted Answer · 2017-06-05 21:33:32Z

9

It's been a while since I have asked this question, and it's starting to get some views so I will add my answer.

First I would need to change my interface to a class and add a constructor.

export class Brand {
  constructor() {}
  brandID: number;
  name: string;
  image: string;
}

Now that I have a constructor I can use the new operator to instantiate the object.

export class BrandListComponent implements OnInit {
  brands: Brand[];
  errorMessage: string;
  newBrand: Brand = new Brand();
  pageTitle: string = 'Brands';

  (...)
}

Now I have the desired brand initialized without any data and I can bind it to the model. Hope this helps.

answered Jun 5, 2017 at 21:33

Derked

99410 silver badges18 bronze badges

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

2 Comments

Rishabh Agrahari Over a year ago

thanks a lot, I don't know why but when I follow angular docs angular.io/guide/forms#create-the-hero-model-class it has defined the fields inside constructor, and I get error of cannot read property of undefined.. but when I follow your answer (moving fields outside contructor) I don't get any errror

Derked Over a year ago

That's because they are trying to create a class with values. In a lot of CRUD situations you want to be able to create an instance of the class with no values. If you added ? after each property name allowing them to be null or you could pass in a value. Then the angular docs version would work. Just depends on your needs.

Gunjan Khanwilkar · Accepted Answer · 2019-09-25 21:01:19Z

6

You could follow this approach if you don't want to use class.

export interface IBrand {
brandID: number;
name: string;
image: string;
}

And now you could create empty objects for typed variables like this.

brand: IBrand = {} as IBrand;

Avoid using classes if you just want to use it for type safety instead use interface as best practice to make your bundle size smaller.

answered Sep 25, 2019 at 21:01

Gunjan Khanwilkar

2,4952 gold badges13 silver badges13 bronze badges

Comments

Thierry Templier · Accepted Answer · 2016-06-11 15:38:54Z

1

I think that you need to initialize your newBrand property as described below:

export class BrandListComponent implements OnInit {
  brands: IBrand[];
  errorMessage: string;
  newBrand: IBrand = {}; // <-----
  pageTitle: string = 'Brands';

  (...)
}

In your case, this property is never initialized and you have the error:

Cannot read property 'name' of undefined

edited Jun 11, 2016 at 15:38

answered Jun 11, 2016 at 15:27

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

1 Comment

Derked Over a year ago

Thanks! I get a typescript error now saying that "Type '{}' is not assignable to type 'IBrand'. Property 'brandID' is missing in type '{}'. Is that something I can ignore or do I need to instantiate the properties?

JHM · Accepted Answer · 2021-07-21 10:26:16Z

0

You probably found out already, but you can/should use: newBrand: IBrand = {}; if your interface properties are optional:

export interface IBrand {
    brandID?: number;
    name?: string;
    image?: string;
}

answered Jul 21, 2021 at 10:26

JHM

4115 silver badges12 bronze badges

Comments

İsmail Şener · Accepted Answer · 2016-12-29 14:15:29Z

-1

You have to write a class for types. Not Interfaces.

newBrand: Brand = new Brand();

answered Dec 29, 2016 at 14:15

İsmail Şener

4232 gold badges6 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 2 two way data binding with ngModel

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related