Hi there, I am encountering an issue with binding my model data to HTML fields where when I try to edit the data it returns an error saying "cannot read value of null". How can I resolve this?
Here is the HTML code snippet:
<div class="form-group">
<input type="text" [(ngModel)]="patient?.Address.Address1" name="address1"
class="form-control input-underline input-lg" id="address1"
placeholder="Address1" maxlength="50" autocomplete="off">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="patient?.Address.Address2" name="address2"
class="form-control input-underline input-lg" id="address2"
placeholder="Address 2" maxlength="50" autocomplete="off">
</div>
<!-- More HTML code omitted for brevity -->
Below is the model:
export class Patient {
id?: number;
Email?: string;
Address? = {
Address1: '',
Address2: '',
City: '',
State: '',
Zip: '',
County: '',
Country: ''
};
}
And here is the TypeScript file snippet:
public patient: Patient;
ngOnInit() {
this.store.select("patient").subscribe(patient => {
this.patient = Object.assign({}, new Patient(), patient);
if (this.patient.Id && !this.patientSnapshot) {
this.patientSnapshot = {...this.patient};
}
});
});
}
When attempting to edit the address, an error occurs stating "cannot read property address 1 of null". Is there a way to handle this error even if the value from the backend is null or an empty string? Thank you.