Двухстороннее связывание данных в автозаполнении matInput - PullRequest
Новая
       24

Двухстороннее связывание данных в автозаполнении matInput

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

Я использую ввод данных автозаполнения материала для поиска статьи из базы данных, я работал с обычным вводом в столбце таблицы с директивой ngModel для двусторонней привязки данных и хотел изменить этот ввод на ввод автозаполнения, чтобы ядобавлен как Angular, упомянутый в документации, formControl во входных данных, так что я могу подписаться на valueChanges в Компоненте

Template 

<tbody>
 <tr *ngFor="let ligneFacture of facture.lignesFacture; let i =index;">
  <td>
    <form>
      <mat-form-field >
         <input type="text" class="form-control" matInput [formControl]="articleKeyword"
           [matAutocomplete]="auto [(ngModel)]="ligneFacture.articleId">
         <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
           <mat-option *ngFor="let article of articles;" [value]="article.id">
              {{article.libelle}}
           </mat-option>
         </mat-autocomplete>
      </mat-form-field>
    </form>
  </td>

TypeScript 

articleKeyword = new FormControl();

ngOnInit() {
  //some code here 

         this.articleKeyword.valueChanges.subscribe(value => this.articleService.queryByKeyword(value).subscribe(
        (res: HttpResponse<IArticle[]>) => {
            this.articles = res.body;
        },
        (res: HttpErrorResponse) => this.onError(res.message)
    ));

Автозаполнение работает нормально и вызывает веб-службу my Rest всякий раз, когда изменяется значение ввода, и пользователь может выбрать свою статью и отправить ее для сохранения в моей базе данных, тогда проблема заключается в следующем: невозможно правильно связать представлениевход с моими избранными статьями получен из базы данных, зная, что без ввода автозаполнения и необходимости formControl, ngModel работал нормально, чтобы выполнить связывание, поэтому мой вопрос здесь: есть ли решение, как подписаться на valuechanges на ngModel?поэтому я могу заменить здесь утилиту [formControl], зная, что использование ngModel и formControl устарело, как упоминалось здесь https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

1 Ответ

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

Вы можете избавиться от [FormControl] и использовать insted (ngModelChange), который запускает изменение вашего ввода.это выглядело бы примерно так 

 <input type="text" matInput (ngModelChange)='searchFunction($event)'
       [matAutocomplete]="auto [(ngModel)]="ligneFacture.articleId">

, и в вашем машинописном тексте ваша функция поиска, которая получает значения из внутреннего интерфейса: 

searchFunction() {//Code here }

Вот фрагмент стека, показывающий функционирование NgModelChangehttps://stackblitz.com/edit/angular-wzw7by

...