0
I’m having a problem, the Angular Material auto complete does not work in my code. Loading the page does not appear nor the options.
html
<div class="form-group col-md-6 form-md-line-input" style="margin-top:0px;">
<input matInput formControlName="devedor" type="text" class="form-control" id="form_control_4" [matAutocomplete]="auto" (input)="getDevedor()">
<!-- <i class="fa fa-spinner"></i> -->
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
<label for="form_control_4">Ente devedor</label>
</div>
typescript
export class FiltroComponent implements OnInit {
options: string[] = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;
ngOnInit() {
// AutoComplete Devedor
this.filteredOptions = this.rForm.get("devedor").valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
// End Of AutoComplete Tribunal
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
In my view is the same as the documentation of Angualr Material, I have no idea why it is not working
how do you initialize your rForm? And how it is declared in your html?
– Eduardo Vargas
rForm: FormGroup;
<form class="form-body" [formGroup]="rForm" (ngSubmit)="sendBtn(rForm.value)">
– Luis Eduardo
I say in the same typexcript. as you instance it?
– Eduardo Vargas