mat-autocomplete not binding correctly











up vote
2
down vote

favorite












I'm attempting to use two matInput fields that each bind with separate mat-autocomplete panels. Following the steps here, I'm able to get one to work fine, but I'm having difficulties with two input fields and autocomplete panels.



Here's my html:



<form>

<mat-form-field>
<input matInput [matAutocomplete]="first" [formControl]="myControl">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>


<mat-form-field>
<input matInput [matAutocomplete]="second" [formControl]="otherControl">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

</form>


Here's my component:



import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
selector: 'app-property-create',
templateUrl: './property-create.component.html',
styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

myControl = new FormControl();
otherControl = new FormControl();

options1: string = ['One', 'Two', 'Three'];
options2: string = ['Four', 'Five', 'Six'];

filteredOptions1: Observable<string>;
filteredOptions2: Observable<string>;

constructor() { }

ngOnInit() {

this.filteredOptions1 = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);

this.filteredOptions2 = this.otherControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter2(value))
);
}

private _filter(value: string): string {
const filterValue = value.toLowerCase();

return this.options1.filter(option => option.toLowerCase().includes(filterValue));
}

private _filter2(value: string): string {
const filterValue = value.toLowerCase();

return this.options2.filter(option => option.toLowerCase().includes(filterValue));
}

}


When linking each text input field to the corresponding panel, I'm using [matAutocomplete]="first" to link the first panel to the first text input. Based on the Angular Material docs, I was expecting to be able to link the second text input field to the second autocomplete panel by using [matAutocomplete]="second".



Right now my autocomplete panels are showing up in the same spot, rather than under the corresponding text field.



Has anyone seen this or know what I'm doing wrong?










share|improve this question






















  • Stackblitz would be the best
    – Antoniossss
    Nov 10 at 22:07















up vote
2
down vote

favorite












I'm attempting to use two matInput fields that each bind with separate mat-autocomplete panels. Following the steps here, I'm able to get one to work fine, but I'm having difficulties with two input fields and autocomplete panels.



Here's my html:



<form>

<mat-form-field>
<input matInput [matAutocomplete]="first" [formControl]="myControl">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>


<mat-form-field>
<input matInput [matAutocomplete]="second" [formControl]="otherControl">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

</form>


Here's my component:



import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
selector: 'app-property-create',
templateUrl: './property-create.component.html',
styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

myControl = new FormControl();
otherControl = new FormControl();

options1: string = ['One', 'Two', 'Three'];
options2: string = ['Four', 'Five', 'Six'];

filteredOptions1: Observable<string>;
filteredOptions2: Observable<string>;

constructor() { }

ngOnInit() {

this.filteredOptions1 = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);

this.filteredOptions2 = this.otherControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter2(value))
);
}

private _filter(value: string): string {
const filterValue = value.toLowerCase();

return this.options1.filter(option => option.toLowerCase().includes(filterValue));
}

private _filter2(value: string): string {
const filterValue = value.toLowerCase();

return this.options2.filter(option => option.toLowerCase().includes(filterValue));
}

}


When linking each text input field to the corresponding panel, I'm using [matAutocomplete]="first" to link the first panel to the first text input. Based on the Angular Material docs, I was expecting to be able to link the second text input field to the second autocomplete panel by using [matAutocomplete]="second".



Right now my autocomplete panels are showing up in the same spot, rather than under the corresponding text field.



Has anyone seen this or know what I'm doing wrong?










share|improve this question






















  • Stackblitz would be the best
    – Antoniossss
    Nov 10 at 22:07













up vote
2
down vote

favorite









up vote
2
down vote

favorite











I'm attempting to use two matInput fields that each bind with separate mat-autocomplete panels. Following the steps here, I'm able to get one to work fine, but I'm having difficulties with two input fields and autocomplete panels.



Here's my html:



<form>

<mat-form-field>
<input matInput [matAutocomplete]="first" [formControl]="myControl">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>


<mat-form-field>
<input matInput [matAutocomplete]="second" [formControl]="otherControl">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

</form>


Here's my component:



import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
selector: 'app-property-create',
templateUrl: './property-create.component.html',
styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

myControl = new FormControl();
otherControl = new FormControl();

options1: string = ['One', 'Two', 'Three'];
options2: string = ['Four', 'Five', 'Six'];

filteredOptions1: Observable<string>;
filteredOptions2: Observable<string>;

constructor() { }

ngOnInit() {

this.filteredOptions1 = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);

this.filteredOptions2 = this.otherControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter2(value))
);
}

private _filter(value: string): string {
const filterValue = value.toLowerCase();

return this.options1.filter(option => option.toLowerCase().includes(filterValue));
}

private _filter2(value: string): string {
const filterValue = value.toLowerCase();

return this.options2.filter(option => option.toLowerCase().includes(filterValue));
}

}


When linking each text input field to the corresponding panel, I'm using [matAutocomplete]="first" to link the first panel to the first text input. Based on the Angular Material docs, I was expecting to be able to link the second text input field to the second autocomplete panel by using [matAutocomplete]="second".



Right now my autocomplete panels are showing up in the same spot, rather than under the corresponding text field.



Has anyone seen this or know what I'm doing wrong?










share|improve this question













I'm attempting to use two matInput fields that each bind with separate mat-autocomplete panels. Following the steps here, I'm able to get one to work fine, but I'm having difficulties with two input fields and autocomplete panels.



Here's my html:



<form>

<mat-form-field>
<input matInput [matAutocomplete]="first" [formControl]="myControl">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>


<mat-form-field>
<input matInput [matAutocomplete]="second" [formControl]="otherControl">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

</form>


Here's my component:



import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
selector: 'app-property-create',
templateUrl: './property-create.component.html',
styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

myControl = new FormControl();
otherControl = new FormControl();

options1: string = ['One', 'Two', 'Three'];
options2: string = ['Four', 'Five', 'Six'];

filteredOptions1: Observable<string>;
filteredOptions2: Observable<string>;

constructor() { }

ngOnInit() {

this.filteredOptions1 = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);

this.filteredOptions2 = this.otherControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter2(value))
);
}

private _filter(value: string): string {
const filterValue = value.toLowerCase();

return this.options1.filter(option => option.toLowerCase().includes(filterValue));
}

private _filter2(value: string): string {
const filterValue = value.toLowerCase();

return this.options2.filter(option => option.toLowerCase().includes(filterValue));
}

}


When linking each text input field to the corresponding panel, I'm using [matAutocomplete]="first" to link the first panel to the first text input. Based on the Angular Material docs, I was expecting to be able to link the second text input field to the second autocomplete panel by using [matAutocomplete]="second".



Right now my autocomplete panels are showing up in the same spot, rather than under the corresponding text field.



Has anyone seen this or know what I'm doing wrong?







angular angular-material mat-autocomplete






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 21:22









Jared

111




111












  • Stackblitz would be the best
    – Antoniossss
    Nov 10 at 22:07


















  • Stackblitz would be the best
    – Antoniossss
    Nov 10 at 22:07
















Stackblitz would be the best
– Antoniossss
Nov 10 at 22:07




Stackblitz would be the best
– Antoniossss
Nov 10 at 22:07












1 Answer
1






active

oldest

votes

















up vote
0
down vote













Turns out you are missing the css classes for the form and mat-form-field elements:



<form class="example-form">
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>


Stackblitz here: https://stackblitz.com/edit/angular-gqax9d






share|improve this answer





















  • Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
    – Jared
    Nov 12 at 19:30










  • Make sure material and @angular/cdk versions match and have you included material css in project?
    – User3250
    Nov 13 at 2:17






  • 1




    Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
    – Jared
    Nov 17 at 17:19










  • Cool! You figured it out.
    – User3250
    Nov 18 at 2:14











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243539%2fmat-autocomplete-not-binding-correctly%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













Turns out you are missing the css classes for the form and mat-form-field elements:



<form class="example-form">
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>


Stackblitz here: https://stackblitz.com/edit/angular-gqax9d






share|improve this answer





















  • Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
    – Jared
    Nov 12 at 19:30










  • Make sure material and @angular/cdk versions match and have you included material css in project?
    – User3250
    Nov 13 at 2:17






  • 1




    Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
    – Jared
    Nov 17 at 17:19










  • Cool! You figured it out.
    – User3250
    Nov 18 at 2:14















up vote
0
down vote













Turns out you are missing the css classes for the form and mat-form-field elements:



<form class="example-form">
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>


Stackblitz here: https://stackblitz.com/edit/angular-gqax9d






share|improve this answer





















  • Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
    – Jared
    Nov 12 at 19:30










  • Make sure material and @angular/cdk versions match and have you included material css in project?
    – User3250
    Nov 13 at 2:17






  • 1




    Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
    – Jared
    Nov 17 at 17:19










  • Cool! You figured it out.
    – User3250
    Nov 18 at 2:14













up vote
0
down vote










up vote
0
down vote









Turns out you are missing the css classes for the form and mat-form-field elements:



<form class="example-form">
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>


Stackblitz here: https://stackblitz.com/edit/angular-gqax9d






share|improve this answer












Turns out you are missing the css classes for the form and mat-form-field elements:



<form class="example-form">
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
<mat-autocomplete #first="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
<mat-autocomplete #second="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>


Stackblitz here: https://stackblitz.com/edit/angular-gqax9d







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 3:57









User3250

1,5433825




1,5433825












  • Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
    – Jared
    Nov 12 at 19:30










  • Make sure material and @angular/cdk versions match and have you included material css in project?
    – User3250
    Nov 13 at 2:17






  • 1




    Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
    – Jared
    Nov 17 at 17:19










  • Cool! You figured it out.
    – User3250
    Nov 18 at 2:14


















  • Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
    – Jared
    Nov 12 at 19:30










  • Make sure material and @angular/cdk versions match and have you included material css in project?
    – User3250
    Nov 13 at 2:17






  • 1




    Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
    – Jared
    Nov 17 at 17:19










  • Cool! You figured it out.
    – User3250
    Nov 18 at 2:14
















Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
– Jared
Nov 12 at 19:30




Works in stackblitz but not on my machine. Would the css make a difference on the linking of text fields to autocomplete panels? Another weird thing happening is the placeholder isn't minimizing when I click inside of the text field.
– Jared
Nov 12 at 19:30












Make sure material and @angular/cdk versions match and have you included material css in project?
– User3250
Nov 13 at 2:17




Make sure material and @angular/cdk versions match and have you included material css in project?
– User3250
Nov 13 at 2:17




1




1




Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
– Jared
Nov 17 at 17:19




Thanks for the help. I tried running ng add @angular/material and reached the error: Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration After changing my angular.json it's working now.
– Jared
Nov 17 at 17:19












Cool! You figured it out.
– User3250
Nov 18 at 2:14




Cool! You figured it out.
– User3250
Nov 18 at 2:14


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243539%2fmat-autocomplete-not-binding-correctly%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma