Initialize PrimeNg editor component with existing data for a form

I need to use it for rich text, when creating the text it works correctly. The problem is updating the previously created text.

When I do a console.log I can see the data but it is not loaded in the editor component

Why can't I view the values? I have followed the complete documentation but I still have the problem

Documentation: https://www.primefaces.org/primeng-v15-lts/editor#import

I am using the following code for the HTML:

<div class="input-field">
<label>Texto</label>
<p-editor #editor [(ngModel)]="about.text" [style]="{ height: '320px' }"></p-editor>
</div>


component.ts

export class AboutUsFormComponent implements OnInit {

about: AboutUs = new AboutUs()

constructor(
private service: Service,
private router: Router,
private activatedRoute: ActivatedRoute,
) { }

ngOnInit(): void {
this.verifiedId()
}

verifiedId() {
this.activatedRoute.paramMap.subscribe(paramMap => {
const id = paramMap.get('id')
if(id){
this.isEditMode = true
this.tittle = 'Editar texto'
this.getAboutUsById(id);
this.loading = false
} else {
this.isEditMode = false
this.tittle = 'Crear texto'
}
})
}

getAboutUsById(id: string){
this.adminService.getAboutUsById(id).subscribe({
next: (response: any) => {
this.about = response
}, error: (error) => {
console.error(error)
}
})
}
}


model.ts

export class AboutUs {
id!: number
text!: string
}


To create it is working correctly but when updating I have the following error

{
"detail": [
{
"type": "missing",
"loc": [
"body",
"text"
],
"msg": "Field required",
"input": {
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"lazyInit": null,
"headers": {}
}
}
}
}


}

PAYLOAD

{
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"lazyInit": null,
"headers": {}
}
}


Angular version 15 PrimeNg version 15

How can I update rich text values?

Continue reading...