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
You need to initialize it.
export class Person {
adres: Address = new Address();
}
or
export class Person {
adres: Address;
constructor() {
this.adres = new Address();
}
}
@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">