Как определить mat- выбран параметр автозаполнения в Angular?

#javascript #angular #angular-material

#javascript #angular #angular-материал

Вопрос:

Я попробовал этот подход, чтобы применить проверку к автозаполнению материала. Но часть, используемая для определения, выбрано ли значение или нет, путем сравнения типа, не работает:

 import { AbstractControl } from '@angular/forms';

export function RequireMatch(control: AbstractControl) {
    const selection: any = control.value;
    if (typeof selection === 'string') {
        return { incorrect: true };
    }
    return null;
}

При отладке приложения typeof selection === 'string' строка всегда возвращает true — не имеет значения, выбран параметр или нет. Есть идеи, как это проверить? Тестируемое приложение доступно на StackBlitz.

1. Я немного смущен тем, что именно вы пытаетесь проверить?

2. вам нужно будет фактически щелкнуть элементы из выпадающего списка, если вы хотите incorrect , чтобы это не было правдой

3. Если входные данные, используемые в автозаполнении, имеют тип text , это всегда будет строка

4. @WilliamRizzi Хорошая мысль, которую вы уловили, спасибо. В таком случае хорошо ли менять его тип? Или, если это не очень хорошая идея, как я могу решить проблему? Мне просто нужно проверить, является ли значение mat-autocomplete выбранным значением или произвольным вводом текста, которое не равно ни одному из выборов.

5. @Elmehdi Мне просто нужно проверить, является ли значение mat-autocomplete выбранным значением или произвольным вводом текста, которое не равно ни одному из выборов.

Ответ №1:

Для меня это работает просто отлично, как только вы нажимаете нужную опцию, ошибки нет.
обратите внимание, что вы должны нажать на нужную опцию, а не просто записать ее.

Нормально с двумя ошибками:

С ошибкой «неверно», если вы не выбрали один из параметров:

Ошибка по-прежнему присутствует, если вы вводите параметр вместо того, чтобы нажимать на него:

Нет ошибки, если вы нажмете на нужную опцию:

Вот живая демонстрация

1. Большое спасибо за вашу помощь, проголосовали 😉 На самом деле демо работает, но, как я думаю, я использую [displayWith] . После его использования [displayWith]="displayFn.bind(this)" я исправил проблему.

Ответ №2:

Просто чтобы добавить к этому, я изменил функцию проверки следующим образом:

   private _autocompleteValidator(control: AbstractControl) {
    return control.value amp;amp; typeof control.value === 'string'
      ? { autocomplete: true }
      : null;
  }

Добавление control.value amp;amp; ... к проверке позволяет очистить ввод (будь то частично введенный или ранее выбранный) и пройти проверку.

Целью этого средства проверки должно быть только принудительное выделение значения из автозаполнителя, если введено значение.

Если требуется конкретное поле, о котором идет речь, его следует настроить с помощью отдельного стандарта Validators.required .