Question

我正在使用物料自动完成输入从数据库中搜索文章，我正在使用ngModel指令在表列中使用常规输入进行双向数据绑定，并且希望将此输入更改为自动完成输入，因此我添加为Angular，在文档中提到了在输入中使用formControl，这样我就可以订阅Component中的valueChanges

模板

<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)
    ));

只要输入的值发生更改，并且用户可以选择他的文章并提交以保存到我的数据库中，则自动完成功能可以正常工作并调用我的Rest Web服务，那么问题就出在这里：无法正确地将输入的视图与我选择的绑定从数据库收到的文章都知道，没有自动完成输入并且不需要formControl，ngModel可以很好地完成绑定工作，所以我的问题在这里：是否存在解决方案，如何在ngModel上订阅值更改？因此，我可以在这里替换[formControl]实用程序，因为它已经弃用了ngModel和formControl，如此处https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

所述

Answer 1

您可以摆脱[FormControl]的使用，并使用（ngModelChange）触发输入的更改。看起来像这样

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

，在打字稿中，您的搜索功能从后端获取值：

searchFunction() {//Code here }

这是一个显示NgModelChange功能的堆栈闪电战 https://stackblitz.com/edit/angular-wzw7by

自动完成matInput中的双向数据绑定

1 个答案: