Connecting it with Ngmodel using nested objects in Angular

Question

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

Gurkan Yesilyurt · Accepted Answer · 2022-01-30 18:50:46Z

1

You need to initialize it.

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

or

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

answered Jan 30, 2022 at 18:50

Gurkan Yesilyurt

2,6752 gold badges24 silver badges23 bronze badges

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

2 Comments

Furkan Akçatepe Over a year ago

teşekkür ederim

HibaHasan Over a year ago

if you find this useful, please approve it by clicking on the check button near the correct answer

DeanTwit · Accepted Answer · 2022-01-30 19:05:02Z

0

@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

answered Jan 30, 2022 at 19:05

DeanTwit

3354 silver badges8 bronze badges

1 Comment

Furkan Akçatepe Over a year ago

I am not very experienced. This information will be very useful for me at the learning stage. ty

Collectives™ on Stack Overflow

Connecting it with Ngmodel using nested objects in Angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related