(autocomplete) _onChange is not a function

[axtho]

Bug:

Implementing the nightly builds creates an error (since the last major update by kara) in the underlying trigger class:

TypeError: this._onChange is not a function
    at MdAutocompleteTrigger._handleInput (autocomplete-trigger.js:166)
    at Wrapper_MdAutocompleteTrigger.handleEvent (wrapper.ngfactory.js:68)
    at View_SearchBoxComponent3.handleEvent_2 (component.ngfactory.js:266)
    at View_SearchBoxComponent3.<anonymous> (view.js:664)
    at HTMLInputElement.<anonymous> (dom_renderer.js:490)
    at ZoneDelegate.webpackJsonp.546.ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (ng_zone.js:262)
    at ZoneDelegate.webpackJsonp.546.ZoneDelegate.invokeTask (zone.js:274)
    at Zone.webpackJsonp.546.Zone.runTask (zone.js:151)
    at HTMLInputElement.ZoneTask.invoke (zone.js:345)

What is the expected behavior?

Entering a string in the input field should open the autocomplete panel.

What is the current behavior?

Nothing happens. Error occurs in the JS logs.

What are the steps to reproduce?

This issue appeared even when using the example given here (https://github.com/angular/material2/tree/master/src/demo-app/autocomplete).

Here is my setup:

<md-input-container flex>
        <input mdInput
               placeholder="Search..."
               type="search"
               [mdAutocomplete]="auto"
               (blur)="handleBlur()"
               (search)="handleSearch($event)"
               (keyup)="handleSearch($event)"
               (clear)="toggleVisibility()"
               style="width:100%">
    </md-input-container>
    <md-autocomplete #auto="mdAutocomplete">
        <md-list>
            <md-list-item *ngFor="let item of items"
                          [routerLink]="['/person/view', item.id]"
                          class="item" style="cursor: pointer">
                <img md-list-avatar src="{{item.icon}}" alt="..." class="img"
                     style="max-width: 40px;max-height:40px">
                <span class="text" md-line>{{ item.text }}</span>
            </md-list-item>
        </md-list>
    </md-autocomplete>

What is the use-case or motivation for changing an existing behavior?

Use case: implementing a top search-bar

Which versions of Angular, Material, OS, browsers are affected?

@angular/cli: 1.0.0-beta.30
node: 6.9.2
os: darwin x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.1 ("@angular/material": "https://github.com/angular/material2-builds.git")
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6
@angular/platform-server: 2.4.6

TypeScript is at: 2.0.10
Build uses ng serve (ng serve --proxy-config proxy.conf.json)

Is there anything else we should know?

I realize that this is the snapshot of current development (not even in a release yet). But maybe this helps to tighten the component for certain environments.

[crisbeto]

I couldn't reproduce it against master. Can you post an example that throws the error? You can use this as a base http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

[kara]

@axtho It looks like you're not using any of the core form directives with your text field (these are what register an onChange function). In the initial version of autocomplete, it's only supported to use form directives like ngModel and formControl to track your value. It looks like you're also switching out md-option with md-list-item. Currently only using md-option is supported with autocompletes as list items don't have a selection API.

If you follow the steps in the docs here, it should work.

We will be adding full support for using autocomplete without any core form directives, but that probably won't make it into the next release. In the meantime, I can submit a quick PR to fix the missing onChange if you want to try to use it now in a hackier way.

[kara]

@axtho #2958 should unblock you once it gets in. I'll create a separate issue for designing the non-forms version of autocomplete.

[axtho]

@kara thanks! I will use the form for the moment. It guess it comes down to design decisions. Thanks for the hint. Maybe the docs should reflect this until a permanent solution is available?

Btw, great work on all this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}