4

找不到问题..它可以工作，但会出现错误并在滚动后打开值..有人吗？

control.registerOnChange 不是一个函数

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>

需要一个如何更改我的代码以使其在没有警告的情况下工作的示例。除了所述错误之外，该代码是可操作的。它不会暂停该过程，并且还可以根据需要获取自动完成值。

4

2 回答 2

4

您不应为同一输入指定 aformControlName和 a 。formControl另外，您的formControlName值指向 aFormGroup什么时候应该指向 a 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>
于 2018-07-16T15:07:09.927 回答
2

您通过和设置FormControl两次。从您的. 由于您的代码工作正常，您可以删除属性。formControlNameformControlsearchPortportCodeformformControlName

<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 示例

于 2018-07-28T18:23:13.150 回答