Unable to bind MD input defaut value to autocomplete

Bug, feature request,

Unable to bind MD input defaut value to autocomplete

What is the expected behavior?

We have a service which returns the result for the inputs. Now iam using mdinput with autocomplete. I can see the results of the autocomplete popped up but not the default value which is assigned to md-input. Below is my code.

Below is the code ::

<md-input-container >
      <input mdInput [mdAutocomplete]="primary" [(ngModel)]="primaryRoleDetails"  (ngModelChange)="filterPrimaryRoles = filterRoles($event)"  [formControl]="primaryRoleCtrl">
 </md-input-container>
 <md-autocomplete #primary="mdAutocomplete"  class="addautoComplete" [displayWith]="displayRoles">
                              <md-option *ngFor="let roles of filterPrimaryRoles"  [value]="roles" >
                                   {{roles?.jobrolecode}}
                              </md-option>
                           </md-autocomplete>

Here primaryRoleDetails is the default value , filterPrimaryRoles is the list of values in the autocomplete.

Any idea on this please?

Iam using Angular 4 + Material Beta 3 version.

[omprakash-sharma]

Can be set or reset formControl as…

 ngOnInit() {
       this.primaryRoleCtrl = new FormControl({value: 'defaultValue'});
      // or can be reset FormControl with default value.
      this.primaryRoleCtrl.reset('defaultValue');
  }

[timmyrosen]

I think I had the same problem as you.

Here is my solution:

<md-form-field class="Autocomplete" [floatPlaceholder]="floatPlaceholder">
    <input type="text" #textInput class="Autocomplete__input" [placeholder]="placeholder" aria-label="Choose an option" mdInput [formControl]="autocompleteControl" [mdAutocomplete]="auto">
    <md-progress-bar class="Autocomplete__progressbar" [mode]="'indeterminate'" [hidden]="!IS_LOADING"></md-progress-bar>
    <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" (optionSelected)="optionSelected($event)">
        <md-option *ngFor="let option of options | async" [value]="option">
            {{ option.autocompleteLabel }}
        </md-option>
    </md-autocomplete>
</md-form-field>

I create a template variable on the input field, and then in my controller:

@ViewChild('textInput') textInput: ElementRef;

ngOnInit() {
    this.textInput.nativeElement.value = 'Your value here';
}