CODEWITHSUNDEEP
javascriptangularangular-ngmodel
Furkan Akçatepe
Furkan Akçatepe

Reputation: 13

Connecting it with Ngmodel using nested objects in Angular

person.model.ts page;

export class Person {
    name: string;
    email: string;
    desc: string;
    adres: Address;
}

export class Address {
    city: string;
    disticy: string;
    postCode: number;
    country: string;
}

person.component.html page;

...

<div class="bg-secondary container"> {{ jsonPerson }} </div>

...

<input [(ngModel)]="newPerson.adres.city" name="city" type="text" id="city" placeholder="Şehir" class="form-control">

...

form.component.ts page;

...

public newPerson: Person = new Person();

get jsonPerson() {
  return JSON.stringify(this.newPerson) 
}

...

The problem is; I want to use my address information as an object. And this is how I used it. But when I bind to my html page as [(ngModel)]="newPerson.address.city" I get an error. That is, how can I reach the Address object inside the Person object and get a successful output.

Information: person.model.ts is not my data source. I distribute my data to the necessary pages via person.service.ts. so there is no database

Upvotes: 0

Views: 1902

Answers (2)

DeanTwit
DeanTwit

Reputation: 335

@Furkan just keep in mind that:

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in a future version of Angular.

Now deprecated: <input [formControl]="control" [(ngModel)]="value">

https://angular.io/guide/deprecations#ngmodel-reactive

Upvotes: 0

Gurkan Yesilyurt
Gurkan Yesilyurt

Reputation: 2675

You need to initialize it.

export class Person {
    adres: Address = new Address();
}

or

export class Person {
    adres: Address;
    constructor() {
      this.adres = new Address();
    }
}

Upvotes: 1

Related Questions