Ledzz / angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor
https://angular2-tinymce.surge.sh
65 stars 37 forks source link

Reactive formControl error when adding tinymce: Resolved #56

Closed Awhiteweb closed 6 years ago

Awhiteweb commented 6 years ago

I have an existing reactive form which works when not using angular2-tinymce. I am replacing a textarea with angular2-tinymce, If I don't provide it with a formControl attribute then the form will load, when I add the formControl attribute I get a console error:

ng:///AppModule/MinutesFormComponent.ngfactory.js:311 
ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (vendor.bundle.js:31589)
    at setUpControl (vendor.bundle.js:31497)
    at FormControlDirective.ngOnChanges (vendor.bundle.js:34295)
    at checkAndUpdateDirectiveInline (vendor.bundle.js:15571)
    at checkAndUpdateNodeInline (vendor.bundle.js:17072)
    at checkAndUpdateNode (vendor.bundle.js:17015)
    at debugCheckAndUpdateNode (vendor.bundle.js:17872)
    at debugCheckDirectivesFn (vendor.bundle.js:17813)
    at Object.eval [as updateDirectives] (ng:///AppModule/MinutesFormComponent.ngfactory.js:384)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:17798)

Here is the form builder:

let now = moment();
this.minutesForm = this.fb.group({
            title: '',
            info: '',
            day: Number( now.format( 'D' ) ),
            month: Number( now.format( 'M' ) ),
            year: Number( now.format( 'YYYY' ) ),
            startHour: Number( now.format( 'HH' ) ),
            startMinute: Number( now.format( 'mm' ) )
        })

here is the slimmed down html (I have removed all the classes and divs):

<form [formGroup]="minutesForm">

    Title:
    <input formControlName="title">

    Date:
    <select formControlName="day">
        <option *ngFor="let day of days" [value]="day">{{day}}</option>
    </select>
    <select formControlName="month">
        <option *ngFor="let month of months" [value]="month.Key">{{month.Value}}</option>
    </select>
    <select formControlName="year">
        <option *ngFor="let year of years" [value]="year">{{year}}</option>
    </select>

    Start:
    <select formControlName="startHour">
        <option *ngFor="let hour of hours" [value]="hour">{{hour}}</option>
    </select>
    <select formControlName="startMinute">
        <option *ngFor="let minute of minutes" [value]="minute">{{minute}}</option>
    </select>

    Minutes:
    <app-tinymce [formControl]="info"></app-tinymce>

    <button (click)="onSubmit()">Submit</button>

</form>

Can I get some guidance on what is causing the error and is there anything I am doing wrong or that I can change to get it working?

Thanks

EDIT:

A more experienced colleague just pointed out the blindingly obvious, that I wasn't referencing the form control correctly in the form.

Apologies for wasting your time.