Angular Reactive Form with an tinymce editor. Control value doesn't change

I'm literally stuck on this problem. I have a form with only one field which is a .

{{formModale.value[descriptionFormValueKeyConst]}}
<form [ngClass]="{'d-none': saved}" [formGroup]="formModale" (ngSubmit)="save()" novalidate>
<div class="row">
<div class="col-12">
<div class="mb-3">
<label [for]="editorId" class="form-label">{{ "condivisione.form.descrizione" | translate }}</label>
<editor [id]="editorId" maxlength="2000" [init]="initEditor" class="textarea-editor"
[ngClass]="{'is-invalid': mostraErroreDescrizione, 'is-valid': validDescrizione}"
formControlName="descrizioneCommentoModal"
></editor>
<div class="invalid-feedback">{{ "condivisione.error.campoobbligatorio" | translate }}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="mb-3">
<div class="form-label">{{ "condivisione.form.allegato" | translate }}</div>
<app-upload-file [componentId]="'upload-' + modalId"
(fileSelected)="onFileSelected($event)"></app-upload-file>
</div>
</div>
</div>
<input type="submit" class="d-none" #submitFormButton>
</form>


In my component (shorted):

private static readonly DESCRIPTION_FORM_VALUE_KEY = "descrizioneCommentoModal";
formModale!: FormGroup;
@Input() commento!: ModalCommento;

ngOnInit() {
this.initComponent();
}

ngAfterViewInit(): void {
this.modalCommento.nativeElement.children[0].addEventListener("show.bs.modal", this.initComponent);
this.modalCommento.nativeElement.children[0].addEventListener("shown.bs.modal", this.onModalShown);
this.modalCommento.nativeElement.children[0].addEventListener("hide.bs.modal", this.dismissModal);
}

save() {
this.descriptionFormControl.markAsTouched();

if (this.formModale.invalid) {
return;
}

console.log("form value in save => ", this.formModale.value[this.descriptionFormValueKeyConst]);

}

uploadImage = (blobInfo: any, progress: any): Promise<string> => {
return firstValueFrom(this.discussioniService.caricaImmagineDiscussione(blobInfo));
}

/** Inits the WYSIWYG editor. */
initEditor: EditorComponent["init"] = {
base_url: "/tinymce",
suffix: ".min",
plugins: "image code lists",
menubar: false,
contextmenu: "image",
toolbar: "bold italic underline strikethrough numlist bullist image code",
images_upload_handler: this.uploadImage,
language_url: "/assets/i18n/tinymce/it.js",
language: "it",
license_key: this.tinyMceApiKey
}

private onModalShown = () => {}

private dismissModal = () => {
if (this.onClose !== undefined) {
this.uploadFileComponent.reset();
this.onClose();
}
}

private initComponent = () => {
this.saved = false;
this.serverError = undefined;
this.onClose = undefined;

this.formModale = this.fb.group({
descrizioneCommentoModal: [this.commento.descrizione, Validators.required]
});
}


I have this inside a bootstrap modal. When the modal shows up, the value is loaded and I see in the editor. But if I start editing it, i see from

{{formModale.value[descriptionFormValueKeyConst]}}


it doesn't change. Even when I submit and call save method, in console I always read the old value not edited.

I try to replace the editor with a normal input text with the same control. In this case I'm able to see the value updating, either in html and in the console. So I guess the problem is with the editor, but I have no idea what causes the issue. I found no solutions on web.

Continue reading...