Angular material matAutocomplete control.registerOnChange不是函数

找不到问题。。它可以工作，但显示错误，并在稍微滚动后打开值。。 有人吗

control.registerOnChange不是一个函数

searchPort:FormControl=newformcontrol（）；
searchPortResult=[]；
...
this.searchPort.valueChanges.pipe(
去BounceTime（400））
.订阅（数据=>{
this.codeTableSrv.searchport（数据）
.subscribe（response=>this.searchPortResult=response）；
});
updatePortCode（事件：MatAutocompleteSelectedEvent）{
if（event.option.value！==未定义）{
这个.form.patchValue({
端口代码：{
id:event.option.value.id，
代码：event.option.value.code，
描述：event.option.value.description，
区域：event.option.value.region
}
});
}
}
displayPortFn（项目）{
如果（项==null）{
返回“”；
}
退货项目代码+“”+项目说明；
}
createForm（）{
this.form=this.fb.group（{
端口代码：this.fb.group({
id:[''，验证器。必需]，
代码：[''，验证器。必需]，
描述：[''，验证器。必需]，
地区：[''，验证器。必填]，
}),    
});
}

{{item.code+''+item.description}}

您不应该为同一输入指定

formControlName

和

formControl

。另外，当您的

formControlName

值应该指向

FormControl

时，它会指向一个

FormGroup

。因此，摆脱

formControlName

：

<div class="col-6">
  <mat-form-field class="example-full-width">
    <input type="text" 
    placeholder="Search port" 
    aria-label="Number" 
    matInput 
    [formControl]="searchPort" 
    [matAutocomplete]="auto">
    <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="updatePortCode($event)" 
    [displayWith]="displayPortFn">
      <mat-option 
      *ngFor="let item of searchPortResult" 
      [value]="item">
        {{ item.code + ' ' + item.description }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

{{item.code+''+item.description}}

您通过

formControlName

和

FormControl

两次设置

FormControl

<代码>搜索端口覆盖您的

表单

中的

端口代码

。由于代码工作正常，您只需删除

formControlName

属性即可

<div class="col-6">
  <mat-form-field class="example-full-width">
    <input type="text" 
    placeholder="Search port" 
    aria-label="Number" 
    matInput
    [formControl]="searchPort" 
    [matAutocomplete]="auto">
    <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="updatePortCode($event)" 
    [displayWith]="displayPortFn">
      <mat-option 
      *ngFor="let item of searchPortResult" 
      [value]="item">
        {{ item.code + ' ' + item.description }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

{{item.code+''+item.description}}

---

去掉formControl或formControlName选项。看，我怎么能读到它们搜索端口是侦听值的端口，端口代码是选择时更新值的位置。。试图移除它们，但它停止工作。现在，至少它可以工作了，但正如上面所说的那样，它发出了可怕的警告，但是工作了，谢谢。就是这样。似乎这就是我两周前给出的答案。