Сравните введенный текст с параметрами поля со списком

#angular #typescript #combobox #mat-form-field

Вопрос:

Итак, у меня есть поле со списком, в котором пользователь может ввести его. Чего я хочу добиться, так это выдавать предупреждение всякий раз, когда пользователь вводит что-то, чего нет в поле со списком выбор/опция. Вот код для моего поля со списком:

 <mat-form-field appearance="outline" class="width-1">
     <mat-label>Aircraft Type (ICAO)</mat-label>
                <!-- test autocomplete aircraft type -->
                <input
                  type="text"
                  placeholder="Aircraft Type (ICAO)"
                  aria-label="Aircraft Type (ICAO)"
                  matInput
                  formControlName="aircraftType"
                  [matAutocomplete]="type"
                  (input)="onAircraftTypeChange()"
                />
                <span matSuffix class="down">
                  <mat-icon>arrow_drop_down</mat-icon>
                </span>
                <mat-autocomplete
                  #type="matAutocomplete"
                  (optionSelected)="onSelectAircraftType($event.option.value)"
                  [displayWith]="displayAircraftTypeFn"
                >
                  <mat-option
                    *ngFor="let type of filteredAircraftTypes | async"
                    [value]="type"
                  >
                    {{ type.label }}
                  </mat-option>
                </mat-autocomplete>
                <!-- end test autocomplete -->
              </mat-form-field>
 

Вот поле со списком. Как вы можете видеть, пользователь может вводить текст в поле со списком, и оно должно предупреждать пользователя всякий раз, когда он вводит код, которого нет в выделенном поле

Ответ №1:

           <input
              type="text"
              #input
              placeholder="Aircraft Type (ICAO)"
              aria-label="Aircraft Type (ICAO)"
              matInput
              (keyup)="check(input.value)"
              formControlName="aircraftType"
              [matAutocomplete]="type"
              (input)="onAircraftTypeChange()"
            />



           check(value:string):void
           {
                  let status = false;
                  filteredAircraftTypes.map(x=>{ 
                  if(x.label===value)status=true})
                  if(!status)
                  {
                     enter code here
                  }


           }
 

Комментарии:

1. это означает, что вы должны ввести логику выделения здесь