Angular Material 7错误在表单提交后重置自动完成

Question

我有以下材料自动完成字段工作。问题是在成功提交数据后重置表单时出现的错误。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'company' of null
TypeError: Cannot read property 'company' of null
at MatAutocomplete.push../src/app/expense/expense-new/expense-new.component.ts.ExpenseNewComponent.displayFn [as displayWith] (expense-new.component.ts:93)

由于某种原因，调用this.expenseForm.reset完全将displayWith指令数据擦除为null。在新页面重新加载时工作正常。

我的模板：

<mat-form-field class="full-width-input">
  <input type="text" placeholder="Pick one" aria-label="Number" matInput formControlName="payee_id"
         [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let payee of filteredOptions | async" [value]="payee">
      {{payee.company + " " + payee.first_name + " " + payee.last_name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

我的提交功能：

onSubmit(formData: any, formDirective: FormGroupDirective) {
   this.expenseForm.value.payee_id = this.expenseForm.value.payee_id.id ;
   this.expenseService.addExpense(this.expenseForm.value).subscribe( success => {
       this.errorMessage = null;
       this.dataService.updateDataTable('new expense success');
       this.expense_expense_categories_attributes.controls = [];
      formDirective.resetForm(); //workaround for error state not resetting
      this.expenseForm.reset();
     },
     error => {
       this.errorMessage = error;
       console.log(this.errorMessage);
       this.openDialog();
     });
 }

自动完成过滤功能：

displayFn(payee?: Payee): string | undefined {
  if ((payee.company !== '' || null) && (payee.first_name !== '' || null  && payee.last_name !== '' || null)) {
    return payee ? payee.company  + ' - ' + payee.first_name + ' ' + payee.last_name : undefined;
  } else if (!payee.company) {
    return payee ? payee.first_name + ' ' + payee.last_name + ' ' + payee.company : undefined;
  } else if ((payee.company !== '' || null) && (payee.first_name === '' || null && payee.last_name === '' || null)) {
    return payee ? payee.company : undefined;
  }
}

private _filter(name: string): Payee[] {
  const filterValue = name.toLowerCase();

  return this.payees.filter(option =>
   option.first_name.toLowerCase().indexOf(filterValue) === 0 ||
   option.last_name.toLowerCase().indexOf(filterValue) === 0 ||
   option.company.toLowerCase().indexOf(filterValue) === 0);
}

Answer 1

displayWith函数取决于具有值的字段。重置表单会从字段中删除值。因此，payee为空。这不是问题而且是正常的 - 通常可以使用空字段（尚未选择值）。你只需要确保你的displayFn函数处理：

displayFn(payee?: Payee): string | undefined {

  if (!payee) {
    return '';
  }

  if ((payee.company !== '' || null) && (payee.first_name !== '' || null  && payee.last_name !== '' || null)) {
    return payee ? payee.company  + ' - ' + payee.first_name + ' ' + payee.last_name : undefined;
  } else if (!payee.company) {
    return payee ? payee.first_name + ' ' + payee.last_name + ' ' + payee.company : undefined;
  } else if ((payee.company !== '' || null) && (payee.first_name === '' || null && payee.last_name === '' || null)) {
    return payee ? payee.company : undefined;
  }
}

如果您打算使用自动完成的默认值，以便无法选择任何内容，则需要在重置表单后将该默认值设置回payee_id控件。