TheLarkInn / angular2-multievent-bindings-plugin

A small plugin that allows for binding multiple events into an Angular2 template.
7 stars 1 forks source link

Failed to execute 'setAttribute' on 'Element' #4

Open Dannnno opened 8 years ago

Dannnno commented 8 years ago

I have a component with a template that looks like this

<div class="form-group">
    <label>Starting on: </label>
    <input type='date' 
            (keyup.enter, blur)="doStuff()"
            [(ngModel)]="start"
            class="form-control" />
</div>
<div class="form-group">
    <label>Ending on: </label>
    <input type='date' 
            (keyup.enter, blur)="doStuff()"
            [(ngModel)]="end"
            class="form-control" />
</div>

Which results in an error like this

Error: Failed to execute 'setAttribute' on 'Element': '(keyup.enter,' is not a valid attribute name.
    at Error (native)
    at BrowserDomAdapter.setAttribute (http://localhost:58246/lib/@angular/platform-browser/platform-browser.umd.js:1138:94)
    at DomRenderer.setElementAttribute (http://localhost:58246/lib/@angular/platform-browser/platform-browser.umd.js:1986:30)
    at DebugDomRenderer.setElementAttribute (http://localhost:58246/lib/@angular/core/core.umd.js:10239:28)
    at DebugAppView._View_ClosedTicketsComponent0.createInternal (ClosedTicketsComponent.template.js:71:17)
    at DebugAppView.AppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:9862:25)
    at DebugAppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:10054:48)
    at DebugAppView._View_DashboardComponent0.createInternal (DashboardComponent.template.js:49:15)
    at DebugAppView.AppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:9862:25)
    at DebugAppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:10054:48)

My boot.ts looks like this

import { MultiEventPlugin } from 'angular2-multievent-bindings-plugin';
import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { AppComponent }   from './app';

bootstrap(AppComponent , [
    HTTP_PROVIDERS,
    provide(
        EVENT_MANAGER_PLUGINS,
        { multi: true, useClass: MultiEventPlugin }
    )
]);

Am I missing something obvious?

TheLarkInn commented 8 years ago

I believe keyup.enter should be keyup.ENTER.

TheLarkInn commented 8 years ago

@Dannnno let me know if that doesn't resolve your issue, it looked like it didn't like the event name before it parsed it, I'd also remove any return lines or carriage returns before the event, just to cover your bases.