In the form which values need to be set in controller, those values should be loaded after the spinner , and during form loading ,I have tried to use async and await,
but after form get displayed those values loading one by one, I need during the form load that values need to be set in the controller
html file
<app-spinner *ngIf="pageSpinner" [overlay]="true" [showNavBar]="true"></app-spinner>
ts file
export class NewUser{
ngOnInit() {
this.pageSpinner=true;
this.setupUserRequestPage();
this.createForm();
this.initRefData();
this.pageSpinner=false;
}
//this call setting the request
setupUserRequestPage() {
this.getRefNumber();
this.getUserRequestFormData(this.user);
}
setUserData(data) {
//this.userRequestForm.controls.requestControl.setValue(data.firstName + ' ' +data.lastName);
//this.userRequestForm.controls.statusControl.setValue(data.id);
this.userRequestForm.controls.statusControl.setValue(RefDataService.getRefDtoFormListByCode(this.userStatusList, "OPEN"));
this.userRequestForm.controls.assigneeControl.setValue(ASSIGNEE.FIRST_NAME + ' ' + ASSIGNEE.LAST_NAME);
}
//getting reference number and set it in refcodeControl
getRefNumber() {
this.userRequestSubscription = this.userService.getRequestReferenceNumber().subscribe(
response => {
this.userRequestForm.controls['refCodeControl'].setValue(response.code);
this.RequestReferenceNumber = this.userRequestForm.controls['refCodeControl'].value;
},
() => {
this.toaster.error("error in generating unique Reference Number", '', TOASTR_TIMEOUT);
}
);
}
createForm() {
this.userRequestForm = this.userFormBuilder.group(
{
CodeControl: [{ value: '', disabled: true }],
requesControl: [{ value: '', disabled: true }],
// projectIdControl: new FormControl('', Validators.required),
statusControl: [{ value: '', disabled: true }],
assigneeControl: [{ value: '', disabled: true }],
descriptionControl: [{ value: '', disabled: false }, Validators.required],
}
);
}
//Passing the response to setUserData
getUserRequestFormData(user) {
const userdata = this.service.getData(user).toPromise().then(response => {
// console.log(response);
this.setUserData(response);
}
);
console.log(userdata);
}
async initRefData() {
this.selectevalue = await this.sharedService.pn();
this.sharedService.Ebm(this.selectevalue).subscribe(
(response) => {
this.currentUser = response;
this.userRequestForm.controls.requesControl.setValue(EBMDtoUtil.getEbmName(this.currentUser));
}
);
}
}
In the form which values need to be set in controller, those values should be loaded after the spinner , and during form loading ,I have tried to use async and await,
but after form get displayed those values loading one by one, I need during the form load that values need to be set in the controller
html file
<app-spinner *ngIf="pageSpinner" [overlay]="true" [showNavBar]="true"></app-spinner>
ts file
export class NewUser{
ngOnInit() {
this.pageSpinner=true;
this.setupUserRequestPage();
this.createForm();
this.initRefData();
this.pageSpinner=false;
}
//this call setting the request
setupUserRequestPage() {
this.getRefNumber();
this.getUserRequestFormData(this.user);
}
setUserData(data) {
//this.userRequestForm.controls.requestControl.setValue(data.firstName + ' ' +data.lastName);
//this.userRequestForm.controls.statusControl.setValue(data.id);
this.userRequestForm.controls.statusControl.setValue(RefDataService.getRefDtoFormListByCode(this.userStatusList, "OPEN"));
this.userRequestForm.controls.assigneeControl.setValue(ASSIGNEE.FIRST_NAME + ' ' + ASSIGNEE.LAST_NAME);
}
//getting reference number and set it in refcodeControl
getRefNumber() {
this.userRequestSubscription = this.userService.getRequestReferenceNumber().subscribe(
response => {
this.userRequestForm.controls['refCodeControl'].setValue(response.code);
this.RequestReferenceNumber = this.userRequestForm.controls['refCodeControl'].value;
},
() => {
this.toaster.error("error in generating unique Reference Number", '', TOASTR_TIMEOUT);
}
);
}
createForm() {
this.userRequestForm = this.userFormBuilder.group(
{
CodeControl: [{ value: '', disabled: true }],
requesControl: [{ value: '', disabled: true }],
// projectIdControl: new FormControl('', Validators.required),
statusControl: [{ value: '', disabled: true }],
assigneeControl: [{ value: '', disabled: true }],
descriptionControl: [{ value: '', disabled: false }, Validators.required],
}
);
}
//Passing the response to setUserData
getUserRequestFormData(user) {
const userdata = this.service.getData(user).toPromise().then(response => {
// console.log(response);
this.setUserData(response);
}
);
console.log(userdata);
}
async initRefData() {
this.selectevalue = await this.sharedService.pn();
this.sharedService.Ebm(this.selectevalue).subscribe(
(response) => {
this.currentUser = response;
this.userRequestForm.controls.requesControl.setValue(EBMDtoUtil.getEbmName(this.currentUser));
}
);
}
}
1 Answer
Reset to default 0Instead of mixing promises and observables, convert all the functions to return observables, use tap to perform the side effects (patching form values).
Then we use forkJoin to make the API calls in parallel and on the subscribe hide the loader.
export class App {
private sub: Subscription = new Subscription();
ngOnInit() {
this.pageSpinner = true;
this.createForm();
this.sub.add(
forkJoin([
this.getRefNumber(),
this.getUserRequestFormData(this.user),
this.initRefData(),
]).subscribe(() => {
this.pageSpinner = false;
})
);
}
setUserData(data) {
//this.userRequestForm.controls.requestControl.setValue(data.firstName + ' ' +data.lastName);
//this.userRequestForm.controls.statusControl.setValue(data.id);
this.userRequestForm.controls.statusControl.setValue(
RefDataService.getRefDtoFormListByCode(this.userStatusList, 'OPEN')
);
this.userRequestForm.controls.assigneeControl.setValue(
ASSIGNEE.FIRST_NAME + ' ' + ASSIGNEE.LAST_NAME
);
}
//getting reference number and set it in refcodeControl
getRefNumber() {
return this.userService.getRequestReferenceNumber().pipe(
tap({
next: (response) => {
this.userRequestForm.controls['refCodeControl'].setValue(
response.code
);
this.RequestReferenceNumber =
this.userRequestForm.controls['refCodeControl'].value;
},
error: () => {
this.toaster.error(
'error in generating unique Reference Number',
'',
TOASTR_TIMEOUT
);
},
})
);
}
createForm() {
this.userRequestForm = this.userFormBuilder.group({
CodeControl: [{ value: '', disabled: true }],
requesControl: [{ value: '', disabled: true }],
// projectIdControl: new FormControl('', Validators.required),
statusControl: [{ value: '', disabled: true }],
assigneeControl: [{ value: '', disabled: true }],
descriptionControl: [{ value: '', disabled: false }, Validators.required],
});
}
//Passing the response to setUserData
getUserRequestFormData(user) {
return this.service.getData(user).pipe(
tap((response) => {
// console.log(response);
this.setUserData(response);
})
);
}
initRefData() {
return this.sharedService
.pn()
.pipe(
switchMap((selectevalue: any) => this.sharedService.Ebm(selectevalue))
)
.pipe(
tap((response) => {
this.currentUser = response;
this.userRequestForm.controls.requesControl.setValue(
EBMDtoUtil.getEbmName(this.currentUser)
);
})
);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}