Ngx-quill: control always dirty

[matrium0]

For some reason it seems like the control is always marked as dirty in my project, even when the user just loaded the page and changed nothing in the quill editor

I use the component like this:
[formats]="['bold','italic','underline','link']" class="form-control additionalConditions" placeholder="write your comment here">

I also tried on an almost blank page with no logic, same behavior: in the NgForm the field controls.customerComment.dirty always seems to be true

[KillerCodeMonkey]

Could you try it with reactive forms? And the formControl input?

[matrium0]

Wow, thats what I call fast answer, thanks!

I am not familiar with reactive forms right now, just the template based approach, sorry! The input was <p>test</p> in this case.

(I tested with v2.0.4 and 2.1.1).

[KillerCodeMonkey]

Yeah, I think there are some quirks with template driven forms.

Just checkout my example repo —> there is also on editor with formControl ;)

Am 27.02.2018 um 14:45 schrieb matrium0 [e-mail]:

Wow, thats what I call fast answer, thanks!

I am not familiar with reactive forms right now, just the template based approach, sorry! The input was "

test

" in this case.

(I tested with v2.0.4 and 2.1.1).

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/121#issuecomment-368880156, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYCqM9D9UR-wrF98cJFyeXtoSnwHRks5tZAbigaJpZM4SU6Rx.

[KillerCodeMonkey]

did you solved it?

[matrium0]

No, not really, but I found a workaround, which is a directive that marks
the control as "pristine" after every input. Of course that has limitations
too, but in my case I can live with that, since the editor is part of a big
form and it is highly unlikely that it will be the only field that changes

• so it's not a big deal that this one input-control is never dirty now.

Thanks for your answers!

2018-03-04 21:24 GMT+01:00 Bengt Weiße [e-mail]:

did you solved it?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/121#issuecomment-370260858,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjLe3XtkcyPLWGR12I-DvXKjmHdo6CMkks5tbE2bgaJpZM4SU6Rx
.

[mecp]

I am facing this with reactive form as well.

[KillerCodeMonkey]

Please Check for reactive forms when You Set You Initial value. In You Set
IT After the Editors initialising, IT is Marked as dirty ;), because it is
something like a control change

Chandraprakash Sharma [e-mail] schrieb am Mo., 30. Apr.
2018, 15:18:

I am facing this with reactive form as well.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/121#issuecomment-385395422,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYAh8iuTAs2YEBXYcsSmJqrMkDtQsks5ttw8sgaJpZM4SU6Rx
.

[mecp]

@KillerCodeMonkey yeah, actually that's when it is set as dirty. So with other form controls when I use formGroup.reset(initialValue), they are not marked as dirty. I specifically use reset() instead of patchValue() or setValue() to not have controls as dirty.

I found some relevant discussion here https://github.com/kekeh/mydatepicker/issues/295 and https://github.com/angular/angular/issues/11073.

Right now, I am using a workaround to explicitly set quill-editor form controls as pristine immeidately after resetting.

[KillerCodeMonkey]

@mecp could you check if this problem exists in latest version 3.3.0?

[jberall]

I am using reactive forms and have the same issue.
Angular 6.
The value is not updating on change. It seems to only be updating when you click another field.
So it is not only the pristine that is the issue.
I'm using 3.3.
I have the quill as a subcomponent and I think that is causing a weird issue.

[KillerCodeMonkey]

Could You build a plunkr to visualize Your issue? Or can You reproduce the
issue with the Demo Repo? There the formcontrol Updates like it should

jberall [e-mail] schrieb am Mo., 9. Juli 2018, 17:15:

I am using reactive forms and have the same issue.
Angular 6.
The value is not updating on change. It seems to only be updating when you
click another field.
So it is not only the pristine that is the issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/121#issuecomment-403514901,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYOj6iVS8-zVT36V9ZxdlK6PDxloqks5uE3OogaJpZM4SU6Rx
.

[jberall]

I made a stackblitz and their is no issue.
The only difference is in the Material, cdk and animations.

I don't have time to investigate now but will try and understand why?
Weird.
Thanks for the prompt reply!
https://stackblitz.com/github/jberall/steve-toolbar

[kamilchlebek]

In my case control is always dirty because of initial text-change event (https://github.com/KillerCodeMonkey/ngx-quill/blob/develop/src/quill-editor.component.ts#L256).

When I populate text editor with content from db (previously we were using different editor), on initial cycle quill will change HTML a bit causing text-change event to be fired.

Would be great if we could conditionally disable initial text-change event callback. Maybe it isn't needed at all in the beginning and event listener should be added after init.

[KillerCodeMonkey]

yeah but how do i know it is the inital content change?

I only know the value of the model, with that value i initialise the edito as initial content.
So you could simply init the editor if you have the really initial value of your model.

like --> do not render the editor until you have the initial value.
How do i know the if the change is the inital change after the editor is already there.

It could be that you model is not set at the beginning, because it is really not set at all. So the first change need to mark the model as dirty ;).
So if you want to render the editor, before you have the value from your db/API whatever you could reset the models state on your own.

[earshinov]

@KillerCodeMonkey , everything is actually quite simple: the component must never call onChange when a value is changed programmatically (rather than by the user). See Angular docs:

• ControlValueAccessor.writeValue — This method is called by the forms API to write to the view when programmatic changes from model to view are requested.
• ControlValueAccessor.registerOnChange — Registers a callback function that is called when the control's value changes in the UI.

Currently ngx-quill violates these rules. By reacting to quill's text-change event and not checking the source parameter, you call onModelChange even if changes were programmatic.

I have a fix ready and create a PR shortly.

[KillerCodeMonkey]

Thats the spirit!

i thought about it :).

I have the plan to look into this in in the near future.
Feel free to add you to the "contributers" section in the package.json ;)

Let me know if you need help or you have no time, so you can share some code and i finalize it.

Thanks!

[KillerCodeMonkey]

should be fixed with 4.4.0

[KillerCodeMonkey]

@earshinov maybe you can validate that this issue is fixed and close the issue? thanks :)

[earshinov]

@KillerCodeMonkey , sorry for disappearing, did not manage to find time today. Will do it asap tomorrow.

[KillerCodeMonkey]

@earshinov no probs :).

i forked your stackblitz and it is working with the latest release:
https://ngx-quill-dirtiness-demo-ephxwx.stackblitz.io/