Ngx-quill: Reactive Form: There is no FormControl instance attached to form control element with name

[fkizewski]

Hi,

I need your help, because with my reactive form i have an error and the entire form is not initialized when i change the "object" to the form.

I load the object from our API, after that I convert the object to a FormGroup and i put it into the form. So for the first time all is fine.
If i change dynamically the object loaded (before that I reset the form), I have this error:

ERROR Error: There is no FormControl instance attached to form control element with name: 'objective'
at _throwError (forms.js:2432)
at _noControlError (forms.js:2414)
at QuillEditorComponent.eval [as onModelChange] (forms.js:2328)
at eval (quill-editor.component.js:123)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4733)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at NgZone.run (core.js:4550)
at Emitter.eval (quill-editor.component.js:122)

In my form.component.html i have this line to use quill-editor (quillEditorConfig is simply my config of the toolbar):
<quill-editor [modules]="quillEditorConfig" formControlName="objective" placeholder="Describe your objectives"></quill-editor>

I have make some search and try to fix it but without success.
I'm on the version 2.1.1 and i've try the 2.2.0, same problem for me.

So do you have some tips to help me?
Thanks for your help, Fabrice

[KillerCodeMonkey]

i think there is a similar issue closed here.

i think the only way is to reinitialise the editor, because there seems to be a moment no control is connected to the formControlName.

It seems more a bug in angular for custom controls:
https://github.com/angular/angular/issues/14057

but you could try to use the [formControl]="form.controls['objective']" syntax.
or better work with the controls-getter :)

[fkizewski]

@KillerCodeMonkey
Thanks for your quick help !!

By using this syntax, now it's fine :):
<quill-editor [modules]="quillEditorConfig" [formControl]="protocolForm.controls['objective']" placeholder="Describe your objectives"></quill-editor>

I've read the post on angular github, i've try to use the tips with no success.

I keep this syntax for now!
Best regards, Fabrice

[KillerCodeMonkey]

But please Check the angular forms docs. There is an api to access a
control by Name form.controls.get('obiective') or Form.get.

Please Use this :)

Fabrice [e-mail] schrieb am Do., 24. Mai 2018, 17:24:

@KillerCodeMonkey https://github.com/KillerCodeMonkey
Thanks for your quick help !!

By using this syntax, now it's fine :):
[formControl]="protocolForm.controls['objective']" placeholder="Describe
your objectives">

I've read the post on angular github, i've try to use the tips with no
success.

I keep this syntax for now!
Best regards, Fabrice

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

[fkizewski]

Thanks for your feedback and your suggestion, but i don't understand why it's necessary to use this method?
Can you be more clear?

[KillerCodeMonkey]

because (even it is in a template) object[xxx] are unsafe in typescript and it could get broken in a minor angular release. So this is the reason angular provides an api for that.

[fkizewski]

Hi @KillerCodeMonkey,

I've keep a note to your suggestion, and i've just fix it on my angular app. So now i've use this syntax: myForm.get('objective').

Thanks a lot for your help and your suggestion.
Best regards, Fabrice

[saadwardag]

If you are using formControlName you should have form created before view render, I initialize form in the constructor and the issue get resolved. it was initialize in ngOnInit function before