There is no FormControl instance attached to form control element

I have a formgroup with some formcontrols. On the view there is a selectbox, when the selection changing I call this angular method: this.tabForm.setControl(‘selectedHtmlControl’, control); -> where control is an AbstractControl instance.

After calling the above method I receive this error message:

Error: There is no FormControl instance attached to form control element with name: 'selectedHtmlControl' forms.js:2427 at _throwError (myProject\node_modules\@angular\forms\esm5\forms.js:2427:1) at _noControlError (myProject\node_modules\@angular\forms\esm5\forms.js:2409:1) at QuillComponent.eval [as onModelTouched] (myProject\node_modules\@angular\forms\esm5\forms.js:2324:58) at Emitter.eval (myProject\node_modules\ngx-quill\src\quill-editor.component.js:96:1) at Emitter.emit (myProject\node_modules\quill\dist\quill.js:8505:1) at Emitter.emit (myProject\node_modules\quill\dist\quill.js:1893:1) at Selection.update (myProject\node_modules\quill\dist\quill.js:3199:1) at eval (myProject\node_modules\quill\dist\quill.js:2871:1) at eval (myProject\node_modules\quill\dist\quill.js:1907:1) at Array.forEach (<anonymous>)

[KillerCodeMonkey]

@feco93 i added an example to the demo-repo.

seems like custom inputs/formcontrols with formControlName are only one-time-binded. so you need to use this:

<quill-editor [formControl]="form.controls['editor']"></quill-editor>

If you use setControl --> editor stores a new reference, but because it is only one-time-binded it does not get the new reference - it only loses the initial one. If you use the [formControl] it explicit creates a one-way-binding where it updates the reference on changes.

Hope this helps and fullfils your needs.

Please, close this issue if this is okay 😃

[KillerCodeMonkey]

okay but maybe we can achieve your goal with another approach:

You have correctly a FormArray with all your language dependent controls. Do not explicit store the current selected one.

simply store the index of the current active language --> and then:

<quill-editor [formControl]="form.controls['localizations'][activeLanguageIndex]"></quill-editor>

So you are not hacky overwrite existing ones, and you do not need another Control 😃

PS: I do not tested the code… so maybe you should use form.get(‘localizations’) and so on. it only should get you the idea how to solve your problem smart 😃