Угловой материал 7 Ошибка сброса автозаполнения после отправки формы - PullRequest
Новая
       5

Угловой материал 7 Ошибка сброса автозаполнения после отправки формы

0 голосов
/ 15 февраля 2019

У меня есть следующие поля автозаполнения материала.Проблема заключается в ошибке, возникающей при сбросе формы после успешной отправки данных. 

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 до нуля.Прекрасно работает при перезагрузке новой страницы.

Мой шаблон: 

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

1 Ответ

0 голосов
/ 15 февраля 2019

Функция 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 после сброса формы.

...