Can Directive [mdAutocomplete] skip initializing when its attribute value is null?

[tom10271]

Bug, feature request, or proposal:

Proposal

<input [mdAutocomplete]="data.selectOptionsObservables ? auto : null" />

<md-autocomplete 
    #auto="mdAutocomplete"
    *ngIf="data.selectOptionsObservables"
>
    <md-option *ngFor="let option of data.selectOptionsObservables | async" [value]="option.value">
        <span>{{ option.label }}</span>
    </md-option>
</md-autocomplete>

What is the expected behavior?

[mdAutocomplete] should skip initializing if value received is null

What is the current behavior?

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'displayWith' of null
TypeError: Cannot read property 'displayWith' of null
    at MdAutocompleteTrigger._setTriggerValue (material.es5.js:18352)
    at material.es5.js:18187

What are the steps to reproduce?

http://plnkr.co/edit/g2Xp6DuLl0WtY6XZN9bN?p=preview
Please noted the error message is not exactly the same as I have.

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

I am building a form generator and would like to use Angular/Material2. Some fields require autocomplete only. I tried to achieve it by:

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

@angular/material: 2.0.0-beta.10
Angular: 4.3.6
OS: macOS Sierra 10.12.6
TS: 2.5.2

[tom10271]

HTML provided is simplified.

The actual one is much longer. I know I can use *ngIf to wrap up the whole block and separate the two(one with autocomplete and one without) yet it is not a good practice.

<div class="input-control-container">
    <md-form-field
            *ngIf="['select', 'radio', 'checkbox'].indexOf(data.renderType) === -1">
        <input mdInput
               *ngIf="data.renderType !== 'textarea'"
               [attr.id]="key ? key : data.label.slugify() + '-input'"
               [type]="data.renderType ? data.renderType : 'text'"
               [attr.checked]="
                           parent?.arrayType === 'enum' && 
                           parent.control.value.indexOf(data.option.value) > -1 ? 
                               true : null
                       "
               (change)="
                           parent?.arrayType === 'enum' ?
                               updateParentValue($event, data.option) :
                               data.control.patchValue(
                                   data.renderType === 'checkbox' ? $event.target.checked : $event.target.value
                               );
                       "
               placeholder="
                           {{ data.renderType !== 'checkbox' || data.label !== undefined ? data.label : data.option.name }}
                       "
               [formControl]="data.control"
               [mdAutocomplete]="data.selectOptionsObservables ? auto : null"
        />

        <md-autocomplete
                #auto="mdAutocomplete"
        >
            <md-option *ngFor="let option of data.selectOptionsObservables | async" [value]="option.value">
                <span>{{ option.label }}</span>
            </md-option>
        </md-autocomplete>

        <textarea mdInput rows="5"
                  *ngIf="data.renderType === 'textarea'" [formControl]="data.control"
                  placeholder="
                              {{ data.label ? data.label : data.option.name }}
                          "
                  [attr.id]="key ? key : data.label.slugify() + '-input'">
                </textarea>

        <md-hint align="start"
                 *ngIf="data?.hints">
            <strong>
                {{ data.hints }}
            </strong>
        </md-hint>
    </md-form-field>
</div>

[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.}