setValue in formArray angular 8 and show ui - html

Question

I want show initial data in my formArray
i can set value and show value in console log but dont show this data in the ui form
ngOnInit() {
this.getCertificate(this.id);
this.assessmentForm = this.fb.group({
certificateArray: this.fb.array([ this.createItem() ]),
});
}
createItem(): FormGroup {
return this.fb.group({
confirm: '',
score: '',
description: ''
});
}
getCertificate(id) {
this.certificateList = [];
this.UsersRegisterService.getCertificate(id).subscribe((res: any[]) => {
this.certificateList = res;
var index=0;
this.certificateList.forEach(element => {
this.AssessmentService.getCertificateAssessment(element.id.value).subscribe((res: any[]) => {
if(res!=null){
this.certificateArray.at(index).setValue(
{ confirm: res['confirm'], score: res['score']['value'],description:res['description']});
console.log( this.assessmentForm['controls'].certificateArray['controls'][index]['controls'].score.value);
}
});
index++;
});
});
}
i set value this method
this.certificateArray.at(index).setValue(
{ confirm: res['confirm'], score: res['score']})
please help me how can i show this value in the Ui form

Answer 1

Use patchValue
this.certificateArray.at(index).patchValue(res);
Note that you would never subscribe inside a subscription, and even less often (never never) subscribe in a forEach. pipe the data instead.

Answer 2

You can refactor your code a little bit, right now you have a shadowed name res. I would log responses from each call to getCertificateAssessment to make sure you're getting what you expect:
getCertificate(id) {
this.certificateList = []; // this should be set at the top of your component
this.UsersRegisterService.getCertificate(id).pipe(
catchError(err => {
console.log('get cert error', err);
return [];
})
).subscribe((list) => {
this.certificateList = list;
this.certificateList.forEach((element, i) => {
this.AssessmentService.getCertificateAssessment(element.id.value).pipe(
catchError(err => {
console.log('get assessment error', err);
return null;
})
).subscribe((res) => {
if (res) {
console.log('res', i, res); // be sure of response
this.certificateArray.at(i).setValue({
confirm: res.confirm,
score: res.score.value,
description: res.description
});
} else {
console.log('no res!');
}
});
});
});
}
Chris makes a good point about piping but I'm guessing these service calls are http requests so they complete just like a promise.
I also added catchError to catch errors with the service calls.
Plus you are having to make a call for each assessment which makes for a lot of calls. Maybe refactor your backend to make it 1 call?
If you refactored the endpoint for getCertficateAssessment to accept an array of values and return an array of responses, you could do this:
this.UsersRegisterService.getCertificate(id).pipe(
switchMap(list => this.AssessmentService.getCertificateAssessment(list.map(l => l.id.value)))
);
You would need to create an id for each assessment so you could assign them.