I am currently facing an issue while trying to store user input data into Firebase. Below is the code snippet for my input field:
<div class="bed-price cc">
<label for="name" class="subtitle-secondary">Name</label>
<input *ngIf="pePropertyStep" type="text" name="name" class="minimal_input shadow_xlight"
[(ngModel)]="pePropertyStep.mid_tenants.mid_tenant_name" #name="ngModel" placeholder="Name">
</div>
This is the model structure I am using:
export interface PropertyPropertyModel {
description: string;
lease_type: string;
is_mid_tenancy: boolean;
mid_tenants: Array<{ mid_tenant_name: string, mid_tenant_email: string, mid_tenant_rent_price: number, status: string}>;
}
This is how I initialize it:
initPropertyProperty = (): PropertyPropertyModel => {
return {
description: '',
is_mid_tenancy: false,
mid_tenants: [
{ mid_tenant_name: '', mid_tenant_email: '', mid_tenant_rent_price: 0, status: 'pending'}
],
}
And here's how I populate it:
populatePropertyProperty = (property: PropertyModel): PropertyPropertyModel => {
return {
description: property.description,
is_mid_tenancy: property.is_mid_tenancy,
mid_tenants: property.mid_tenants,
}
Despite having successfully used similar methods to upload data to Firebase before, this time I encounter an error in console even before attempting to push data. The specific error message reads:
ERROR TypeError: Cannot read property 'mid_tenant_name' of undefined
at Object.eval [as updateDirectives] (PeInfoPropertyComponent.html:19)
This error seems to be originating from the HTML section mentioned above. Could it possibly be related to the utilization of an array of objects in this scenario?