Recently Updated:
The original poster has made changes to the question by removing reactive form as mentioned in their comment on my answer. Due to this latest modification, a timeout is now required because the print() function executes before the UI element is rendered. By using setTimeout(), a delay is introduced allowing the UI elements to be added.
onPrint(list: any) {
this.selectedInfo = list;
setTimeout(() => { print() }, 1000);
}
View the updated code on Stackblitz: https://codesandbox.io/s/hardcore-https-dch04h
Original Response:
A discrepancy was found in the form names (displayForm in component and printForm in HTML) along with some coding issues in your Stackblitz project. I have rectified most of the problems for you.
Additionally, I suggest splitting your form so that each field corresponds directly to a field in the list, which will make it easier to manage them individually.
For detailed changes, refer to:
https://codesandbox.io/s/crazy-bassi-e6042s
app.component.ts:
constructor(private formBuilder: FormBuilder) {
this.displayForm = this.formBuilder.group({
name: ["", Validators.required],
desc: ["", Validators.required]
});
}
onPrint(list: { name: string; description: string }) {
console.log(list);
this.displayForm.controls.name.setValue(list.name);
this.displayForm.controls.desc.setValue(list.description);
console.log(this.displayForm.controls.name.value);
console.log(this.displayForm.controls.desc.value);
print();
}
app.component.html:
<div id="printSection">
<form [formGroup]="displayForm">
<h1>SAMPLE HEADER TITLE</h1>
<div>{{ displayForm?.controls?.name?.value }}</div>
<div>{{ displayForm?.controls?.desc?.value }}</div>
</form>
</div>