When I refer to property, I'm specifically talking about a house. This is a platform for listing properties.
I am currently working on an application using Angular (with a Laravel API backend). The form for submitting a property is divided into 3 steps. In the first step, within my advert service, I assign the model data returned as the current property. I can successfully log this data to the console.
However, when I attempt to log it upon submission of the second part of the form, I encounter an undefined error. I need the ID from this object to send it to the URL.
AdvertService
createAdvert(userId: number, property: Property) {
return this.http.post(this.baseUrl + userId + '/store', {property}).pipe(
map((response: any) => {
this.currentProperty = response;
console.log(response);
})
);
}
When I inject the service into the second part of the form and try to access the current property with a console.log, I receive 'undefined'.
submitPayment() {
const currentProperty = this.advertService.currentProperty.id;
console.log(currentProperty);
if (this.advertPaymentForm.value) {
this.payment = (Object.assign({}, this.advertPaymentForm.value));
console.log(this.payment);
this.advertService.createAdvertPayment(currentProperty.id, this.payment).subscribe(data => {
this.alertify.success('Success');
}, error => {
this.alertify.error(error);
});
}
}
Property Model
export interface Property {
id?: number;
town?: string;
county?: string;
address: string;
postcode: string; // corrected spelling
eircode: string;
property_type: string;
selling_type: string;
price: number;
bedrooms: number;
bathrooms: number;
size: number;
building_energy_rating: string;
description: string;
user_id: number;
}
Edit. Data from createAdvert console:
https://i.sstatic.net/tEWLH.png
Any thoughts on what could be causing the issue here?
Full advert.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Property } from '../_models/property';
import { User } from '../_models/user';
import { Payment } from '../_models/payment';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AdvertService {
baseUrl = environment.apiUrl + 'advertisement/';
currentProperty: any;
constructor(private http: HttpClient) { }
createAdvert(userId: number, property: Property) {
return this.http.post(this.baseUrl + userId + '/store', {property}).pipe(
map((response: any) => {
this.currentProperty = response;
console.log(this.currentProperty);
})
);
}
createAdvertPayment(propertyId: number, payment: Payment) {
return this.http.post(this.baseUrl + propertyId + '/payment', {payment});
}
}
Full advert-payment.component.ts (where the service is injected into)
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AdvertService } from '../_services/advert.service';
import { AlertifyService } from '../_services/alertify.service';
import { AuthService } from '../_services/auth.service';
import { Payment } from '../_models/payment';
@Component({
selector: 'app-advert-payment',
templateUrl: './advert-payment.component.html',
styleUrls: ['./advert-payment.component.css']
})
export class AdvertPaymentComponent implements OnInit {
advertPaymentForm: FormGroup;
model: any;
payment: Payment;
constructor(private advertService: AdvertService, private alertify: AlertifyService, public authService: AuthService,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.createAdvertPaymentForm();
}
createAdvertPaymentForm() {
this.advertPaymentForm = this.formBuilder.group({
town: ['', Validators.required],
county: ['', Validators.required],
billing_address: ['', Validators.required],
cardnumber: ['', Validators.required],
month: ['', Validators.required],
year: ['', Validators.required],
cvv: ['', Validators.required],
});
}
submitPayment() {
const currentProperty = this.advertService.currentProperty[0].id;
console.log(currentProperty);
if (this.advertPaymentForm.value) {
this.payment = (Object.assign({}, this.advertPaymentForm.value));
console.log(this.payment);
this.advertService.createAdvertPayment(currentProperty.id, this.payment).subscribe(data => {
this.alertify.success('Success');
}, error => {
this.alertify.error(error);
});
}
}
}