Angular Material 7 提交表单后重置自动完成时出错

Angular Material 7 Error Resetting Autocomplete After Form Submit

我有以下 material 自动完成字段。这个问题是我在成功提交数据后重置表单时遇到的错误。

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

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 控件上重新设置该默认值。