Angular 6 асинхронное автозаполнение не работает, но отображает элементы без изменения значения - PullRequest
Новая
       23

Angular 6 асинхронное автозаполнение не работает, но отображает элементы без изменения значения

0 голосов
/ 13 февраля 2019

Angular 6 асинхронный autocomplete не работает, но отображает элементы без изменения значения и не уменьшает список предлагаемых значений

component.ts: 

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

export class AjouterMarcheComponent implements OnInit {
    createForm: FormGroup;
    myControl : FormControl;
    directions: string[] = ['DGI','SSI','TTU','BLI'];
    filteredDirections: Observable<string[]>;

    constructor(private fb: FormBuilder) {
        this.createForm = this.fb.group({
            NomDirection: ['', Validators.required]})
            this.myControl= new FormControl();
        });
    }
    ngOnInit() {
        this.filteredDirections = this.myControl.valueChanges.pipe(
            startWith(''),
            map(value => this._filter(value))
        );
    }
    private _filter(value: string): string[] {
        const filterValue = value.toLowerCase(); //miniscule
        return this.directions.filter(direction => `direction.toLowerCase().indexOf(filterValue) === 0);
    }
}

Спасибо за вашепомощь

1 Ответ

0 голосов
/ 13 февраля 2019

Compoment.html 

compoment.html

<div>
<br>
<mat-card>
<br>
<form [formGroup]="createForm" class="create-form" >
        <mat-form-field class="field-full-width">
           <input placeholder="Choisir ou ajouter une direction" type="text" aria-label="Number" [formControl]="myControl" matInput  [matAutocomplete]="auto" #NomDirection>
           <mat-autocomplete #auto="matAutocomplete">
             <mat-option *ngFor="let option of options" [value]="option">
               {{ option }}
             </mat-option>
           </mat-autocomplete>
         </mat-form-field>
       </form>
     </mat-card>
   </div>
...