Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

So, I have a combo box where the user can type into it. What I want to achieve is to give a warning whenever the user typed something that is not in the combo box selection/option. Here is the code for my combo box:

<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>

Here is the combo box. As you can see, the user can type inside the combo box, and it should warn the user whenever they entered a code that is not in the selection

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
164 views
Welcome To Ask or Share your Answers For Others

1 Answer

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


           }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...