Hi I’m working with ionic 4 and angular 8 and I tried to make an ecommerce application and when I tried to load the addresspage book of customer’s address I got two errors that i didn’t understand where did it come so I put below the stack trace of the console , I’m running my app in chrome if somone could help me it will be helpful for me in order to continue
i put below the file concerned
addressViewPage.html
<ion-header class="header-bg">
<ion-toolbar mode="ios">
<ion-buttons>
<ion-back-button defaultHref="/address-book" color="light"></ion-back-button>
</ion-buttons>
<ion-title color="light">Address view</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" color="light">
<ion-grid>
<ion-row class="logo-row">
<ion-col class="ion-no-padding">
<ion-img src="../assets/images/delivery.PNG"></ion-img>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="6" offset-md="3">
<form [formGroup]="addressForm" (ngSubmit)="onEditAddress()">
<ion-card>
<ion-card-header>
<ion-item-divider>
Address Details
</ion-item-divider>
</ion-card-header>
<ion-card-content>
<ion-list>
<div class="aligns-div">
<div class="form-group">
<ion-label>First Name</ion-label>
<ion-input type="text" [(ngModel)]="address.firstName" formControlName="firstName" class="form-control" ></ion-input>
</div>
<div class="form-group">
<ion-label>Last Name</ion-label>
<ion-input type="text" [(ngModel)]="address.lastName" formControlName="lastName" class="form-control" ></ion-input>
</div>
</div>
<div class="form-group">
<ion-label>street Address</ion-label>
<ion-input type="text" class="form-control" [(ngModel)]="address.street" formControlName="street"></ion-input>
</div>
<div class="form-group">
<ion-label>City</ion-label>
<ion-input type="text" [(ngModel)]="address.city" formControlName="city" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Country</ion-label>
<ion-input type="text" [(ngModel)]="address.country" formControlName="country" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Code Postal</ion-label>
<ion-input type="text" [(ngModel)]="address.zipCode" formControlName="zipCode" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Numéro de téléphone</ion-label>
<div class="form-inline">
<ion-select value="216" formControlName="codeArea">
<ion-select-option value="216">+216</ion-select-option>
<ion-select-option value="242">+242</ion-select-option>
<ion-select-option>+337</ion-select-option>
</ion-select>
<ion-input type="text" [(ngModel)]="address.cellNumber" formControlName="cellNumber" class="form-control"></ion-input>
</div>
</div>
</ion-list>
</ion-card-content>
</ion-card>
<div class="form-group ion-text-center">
<ion-button color="success" type="submit">Save</ion-button>
</div>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
addressViewPage.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Address} from '../../models/address.model';
import {UserService} from '../../services/auth/user.service';
import {User} from '../../models/user.model';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-address-view',
templateUrl: './address-view.page.html',
styleUrls: ['./address-view.page.scss'],
})
export class AddressViewPage implements OnInit {
addressId: number;
user: User;
addressForm: FormGroup;
address: Address;
constructor(private route: ActivatedRoute,
private userService: UserService,
private formBuilder: FormBuilder) {
this.addressId = this.route.snapshot.params.id;
this.user = this.userService.getAuthenticatedUser();
console.log(this.user);
this.userService.getSingleAddress(this.addressId).subscribe(
res => {
this.address = res;
this.address.firstName = this.user.firstName;
this.address.lastName = this.user.lastName;
this.address.cellNumber = this.user.cellNumber;
console.log(this.address, 'here address-view go edit');
}
);
console.log(this.address, 'here');
}
ngOnInit() {
this.initForm();
}
/*
*
getSelectAddress(id: number, user: User) {
this.userService.getSingleAddress(id).then(
res => {
res.subscribe(
adr => {
this.address = adr;
this.address.firstName = user.firstName;
this.address.lastName = user.lastName;
this.address.cellNumber = user.cellNumber;
console.log(this.address, 'in the function');
},
err => {
console.log('failed to load address' + err);
}
);
}
);
console.log(this.address);
}*/
initForm() {
this.addressForm = this.formBuilder.group({
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
street: ['', [Validators.required]],
city: ['', [Validators.required]],
country: ['', [Validators.required]],
zipCode: ['', [Validators.required]],
codeArea: ['', [Validators.required]],
cellNumber: ['', [Validators.required]]
});
}
onEditAddress() {}
}
I got a strange behavior , the address that I retrieve from the server is retrieved well some but it's undefined in the html page and I don't know why
