matAutocomplete control.registerOnChange 不是函数

Question

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

control.registerOnChange is not a function

searchPort: FormControl = new FormControl();
searchPortResult = [];
...


this.searchPort.valueChanges.pipe(
    debounceTime(400))
  .subscribe(data => {
    this.codeTableSrv.searchport(data)
      .subscribe(response => this.searchPortResult = response);
  });

updatePortCode(event: MatAutocompleteSelectedEvent) {
  if (event.option.value !== undefined) {
    this.form.patchValue({
      portCode: {
        id: event.option.value.id,
        code: event.option.value.code,
        description: event.option.value.description,
        region: event.option.value.region
      }
    });
  }
}

displayPortFn(item) {
  if (item == null) {
    return '';
  }
  return item.code + ' ' + item.description;
}


createForm() {
    this.form = this.fb.group({     
      portCode: this.fb.group({
        id: ['', Validators.required],
        code: ['', Validators.required],
        description: ['', Validators.required],
        region: ['', Validators.required],
      }),    
    });
  }

<div class="col-6">
  <mat-form-field class="example-full-width">
    <input type="text" 
    placeholder="Search port" 
    aria-label="Number" 
    matInput 
    formControlName="portCode" 
    [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>

需要一个示例来说明如何更改我的代码以使其在没有警告的情况下运行。除了规定的错误之外，该代码是可操作的。它不会阻止该过程，并且还可以根据需要获取自动完成值。

Answer 1

您不应为同一输入指定 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>

Answer 2

您通过 formControlName 和 formControl 设置了两次 FormControl。 searchPort 覆盖了 form 中的 portCode。由于您的代码工作正常，您可以删除 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>

Stackblitz example

matAutocomplete control.registerOnChange 不是函数

matAutocomplete control.registerOnChange is not a function

angular-material

angular-material2

angular-material-5

angular-material-6