Control cannot be used inside a template-driven form

[dfederm]

I get the following error when trying to use this inside of a <form>.

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.TemplateDrivenErrors.missingNameException (forms.es5.js?3553:4122)
    at NgModel._checkName (forms.es5.js?3553:4440)
    at NgModel._checkForErrors (forms.es5.js?3553:4419)
    at NgModel.ngOnChanges (forms.es5.js?3553:4324)
    at checkAndUpdateDirectiveInline (core.es5.js?de3d:10840)
    at checkAndUpdateNodeInline (core.es5.js?de3d:12341)
    at checkAndUpdateNode (core.es5.js?de3d:12284)
    at debugCheckAndUpdateNode (core.es5.js?de3d:13141)
    at debugCheckDirectivesFn (core.es5.js?de3d:13082)
    at Object.eval [as updateDirectives] (SettingsDialogComponent.html:26)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js?de3d:13067)
    at checkAndUpdateView (core.es5.js?de3d:12251)
    at callViewAction (core.es5.js?de3d:12599)
    at execComponentViewsAction (core.es5.js?de3d:12531)
    at checkAndUpdateView (core.es5.js?de3d:12257)
    at callWithDebugContext (core.es5.js?de3d:13467)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js?de3d:13007)
    at ViewRef_.detectChanges (core.es5.js?de3d:10174)
    at eval (core.es5.js?de3d:4812)
    at Array.forEach (<anonymous>)
    at ApplicationRef_.tick (core.es5.js?de3d:4812)
    at eval (core.es5.js?de3d:4684)
    at ZoneDelegate.invoke (zone.js?6524:392)
    at Object.onInvoke (core.es5.js?de3d:3890)
    at ZoneDelegate.invoke (zone.js?6524:391)
    at Zone.run (zone.js?6524:142)
    at NgZone.run (core.es5.js?de3d:3821)
    at Object.next (core.es5.js?de3d:4684)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js?de3d:3635)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js?9a65:238)
    at SafeSubscriber.next (Subscriber.js?9a65:185)
    at Subscriber._next (Subscriber.js?9a65:125)
    at Subscriber.next (Subscriber.js?9a65:89)
    at EventEmitter.Subject.next (Subject.js?104a:55)
    at EventEmitter.emit (core.es5.js?de3d:3621)
    at checkStable (core.es5.js?de3d:3855)
    at onLeave (core.es5.js?de3d:3934)
    at Object.onInvokeTask (core.es5.js?de3d:3884)
    at ZoneDelegate.invokeTask (zone.js?6524:424)
    at Zone.runTask (zone.js?6524:192)
    at ZoneTask.invokeTask [as invoke] (zone.js?6524:499)
    at invokeTask (zone.js?6524:1540)
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js?6524:1566)

[JulioWar]

Hello @dfederm

Sorry but seems to me that is not a error from this library. Maybe if you share some of your code in your view i can help you.

You can check my implementation with form in the demo. check this repository

[dfederm]

The error is within angular itself when using template-driven forms. The input from your lib does not have a name attribute (or an option to use that standalone thing), so the template-driven form code in angular throws.

[JulioWar]

@dfederm you checked the repository ?, I think you can use ngModelOptions, i never tried but should work because the component itself handle the model

[dfederm]

Ah, I assumed ngModelOptions needed to be on the underlying <input> as per in the error message's example. I suppose it makes more sense to be on the same element as what the ngModel is on though.