Angular - Create property in new property of object

user_7754048 0
Viewed 1633

Currently, I have a select element in my html which has a ngModel to the object details:

[ngModel]="details?.publicInformation?.firstname"

However, publicInformation may not exist in that object, or if it does, maybe firstname does not exist. No matter the case, in the end, I want to create the following:

[ngModel]="details?.publicInformation?.firstname" (ngModelChange)="details['publicInformation']['firstname'] = $event"

Basically, if the select is triggered, even if neither of publicInformation nor firstname exist, I would like to create them inside details and store the value from the select.

The issue is that I am getting 

Cannot set property 'firstname' of undefined

Can someone explain what I am doing wrong here and how can I achieve the result I desire?

angular object properties html javascript
2 Answers

You should do that when you load the form data.

For example, you might have something like this:

ngOnInit() {
    this._someService.loadForm().then((formData: FormData) => {
        this.details = formData;
    });
}

Then, you could modify that to fill in the missing empty properties you need:

ngOnInit() {
    this._someService.loadForm().then((formData: FormData) => {
        this.details = formData || {};

        if (!this.details.publicInformation) {
            this.details.publicInformation = { firstname: '' };
        } else if (!this.details.publicInformation.firstname) {
            this.details.publicInformation.firstname = '';
        }
    });
}

However, it would be better to place this logic in the services, so that they are responsible for adding all the necessary empty properties to the data they load, or if you are using Redux, then it should go into the reducers.

user_37239930

You need to initialize details and publicInformation to empty object

public details = {publicInformation : {}};
user_39806210
Related