ReactiveForm / FormControl with initial value

[roymilder]

WIth the current version it looks like the initial value is not set on the editor when using Reactive Forms with formControleName.

How to reproduce? Clone the repo, check sample 9 / Textarea only with formControlName

In the component the initial value is set:

  form = new FormGroup({
    formModel: new FormControl('Hello World', Validators.minLength(2)),
  });

The value is correctly set in the formControl:

        <div [froalaView]="form.value.formModel"></div>

However the editor stays empty.

After typing in the editor the control value/model correctly changes.

Sample 10 however does work (only using [(froalaModel)] and wrapping it in an component )

So is using formControlName broken or am I missing something?

using v3.0.0-beta.2

[Vingtoft]

bump

[flonussi]

I have the same issue! With version 2.9.5 everything worked fine but since updating to v3 this does not work anymore

[Andrew3005]

same!

[gladkiy]

I use this: <div [froalaEditor]="options" formControlName="signatureHTML"></div>

this.emailSignatureForm = this.formBuilder.group({
            signatureHTML: ['some text']
        });

And all works fine in v3

[bkanuck]

This issue still exists in v3.1.0. Hard coding an initial value as gladkiy mentions works, dynamically setting a value using patchValue does not.

Has anyone come up with any workarounds other than sticking with 2.9.5 or using Template-driven forms instead of Reactive?

[stephane317]

+1 same here

[flonussi]

still no update on this issue?

[irinelpascu]

Any chance of a fix?

[jasurabdullin]

BUMP. Major BUG/LIMITATION. Please advise.

[kewur]

unsure if froala even checks these bug reports

[gladkiy]

it seems for me everything works

<div class="sample">
  <h2>Sample 9: Editor with reactive forms</h2>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <h3>Textarea only with formControlName</h3>
    <textarea
      id="sample9-2"
      [froalaEditor]
      formControlName="formModel"
    ></textarea>
    <button type="submit">Submit</button>
  </form>
  <button (click)="setValue()">Set preset value</button>
</div>

and ts:

import { Component, OnInit } from '@angular/core';
import {
  FormControl,
  FormGroup,
  Validators,
  FormBuilder,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {
    this.form = this.formBuilder.group({
      formModel: new FormControl('Hello World', Validators.minLength(2)),
    });
  }

  onSubmit(): void {
    console.log(this.form.value);
  }

  setValue() {
    this.form.patchValue({ formModel: 'Default text' });
  }
}

I looked at code here https://stackblitz.com/edit/angular-froala-wysiwyg-dvh6xc I tried with the latest version of angular and angular-froala-wysiwyg plugin

[adam-marshall]

This still seems to be an issue.

Has anyone attempted to resolve this by using a ControlValueAccessor approach?

[adam-marshall]

We stepped through as it seems the FroalaEditorDirective is a ControlValueAccessor already so we really wanted to get it working using [formControl].

As pointed out in the original post, [froalaView] is fine, its just [froalaEditor] which isn't.

The problem seems relatively simple. If your setValue/patchValue call happens too early, before the Froala editor is initialised, then it doesn't take.

In the FroalaEditorDirective it has some logic to update the model, as of today here is a snippet of what we are seeing:

        if (this._editorInitialized) {
            if (!this._hasSpecialTag) {
                this._editor.html.set(content);
            }
            else {
                this.setContent();
            }
        }
        else {
            if (!this._hasSpecialTag) {
                this._element.innerHTML = content || '';
            }
            else {
                this.setContent();
            }
        }

this._editorInitialized is just a simple boolean. If that hasn't been set in time, then the setValue/patchValue call triggers writeValue but it never then hits this._editor.html.set, and when the editor is initialised it doesn't use the existing value.

FroalaViewDirective doesn't have this problem it seems, as the innerHTML is set, but then nothing else takes its place.

For now we are just wrapping our call to setValue in a setTimeout with no delay and that works as a temporary fix.

For us it would be a bit unwieldy to hook into an 'initialized' event before calling setValue/patchValue, so we would appreciate this receiving a bit of attention, and maybe taking a more asynchronous approach, unless there is some other recommendation from Froala?