Hello guys this is my first time on a while posting here, everyone thanks for your help, but I don't know to do here.
I have a Angular+2 web app (I'm new with Angular) with one component (User) and a service (user.service.ts), I have already done my HTTP request for getUser(Id) and is returning the json correctly, on my component I need to set some variables with my service, but my variables are returning null or empty, which could be the most correct choice to do this?
I think my error could be on the .subscribe method and Observable thing.
//User service
getUser(id:string): Observable<User>{
return this.http.get<User>(this.userUrl + "/"+ id);
}
//Component
ngOnInit() {
this.route.params
.subscribe((params:Params)=>{
this.id = params['id'];
this.editMode = params['id'] != null;
this.initForm();
});
}
initForm(){
let id = '';
let company ='';
let userNo = 0;
let email = '';
let firstName = '';
let lastName = '';
let address1 = '';
let address2 = '';
let city = '';
let country = '';
let postalCode = '';
let mobilePhoneNumber = '';
let homePhoneNumber = '';
let birthday = '';
let userType = '';
let gender = '';
if(this.editMode){
this.userService.getUser(this.id).filter(x => x.id === this.id).subscribe((data:User) => { return new User(
id = data.id,
userNo = data.userNo,
firstName = data.firstName,
lastName = data.lastName,
address1 = data.address1,
address2 = data.address2,
city = data.city,
country = data.country,
postalCode = data.postalCode,
homePhoneNumber = data.homePhoneNumber,
mobilePhoneNumber = data.mobilePhoneNumber,
email = data.email,
gender = data.gender,
userType = data.userType
)});
}
this.userForm = new FormGroup({
'company': new FormControl(company, Validators.required), <---- company null/empty
'userNo': new FormControl(userNo, Validators.required), <---- userNo null/empty
'email': new FormControl(email, Validators.required), <---- email null/empty
'firstName': new FormControl(firstName, Validators.required), <---- firstName null/empty
'lastName': new FormControl(lastName, Validators.required), <---- lastName null/empty
'address1': new FormControl(address1, Validators.required), <---- address1 null/empty
'address2': new FormControl(address2, Validators.required), <---- address2 null/empty
'city': new FormControl(city, Validators.required), <---- city null/empty
'country': new FormControl(country, Validators.required), <---- country null/empty
'postalCode': new FormControl(postalCode, Validators.required), <---- postalCode null/empty
'mobilePhoneNumber': new FormControl(mobilePhoneNumber, Validators.required), <---- mobilePhoneNumber null/empty
'homePhoneNumber': new FormControl(homePhoneNumber, Validators.required), <---- homePhoneNumber null/empty
//'birthday': new FormControl(birthday, Validators.required), <---- birthday null/empty
'userType': new FormControl(userType, Validators.required) <---- userType null/empty
})
}
You need to move you this.userForm = new FormGroup({})
logic inside your .subscribe()
because when you are setting this.userForm
your subscription was not yet done.
Also, your subscription is returning a new User that is not stored anywhere.
I would recommend you to create private method that takes an User
instance and creates/ updates the form once (when no edit mode) and again when you are in edit mode and recovers the user data from your subscription.