1
\$\begingroup\$

Multiple forms make use of the autocomplete of material, which gives a resulting code that is repetitive and difficult to maintain.

The controller is left with pairs of repeated methods [for each controller].

displayFn(option?: Interface): string | undefined {
  return option ? option.Property : undefined;
}

filterAutocomplete(ev: string) {
  if (ev !== '' && ev !== null) {
    // ...
  }
}

The view is based on using the mat-autocomplete with a different template variable for each of them, saving errors.

<mat-form-field>
    <input
      matInput
      [matAutocomplete]="auto"
      (ngModelChange)="filterAutocomplete($event)"
      formControlName="name"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [displayWith]="displayAutocomplete"
    >
    <mat-option
      *ngFor="let option of selectionsOption"
      [value]="option"
    >
      {{ option.Property }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

In summary it is an example that would serve me for any context of this type:

  1. List item
  2. Project with multiple forms.
  3. Frequent use of autocompletes in forms
  4. Optional, use of external libraries.
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.