【问题标题】:Compare inputted text to combo box options将输入的文本与组合框选项进行比较
【发布时间】:2021-11-01 15:27:39
【问题描述】:

所以,我有一个组合框,用户可以在其中输入内容。我想要实现的是在用户键入不在组合框选择/选项中的内容时发出警告。 这是我的组合框的代码:

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

【问题讨论】:

    标签: angular typescript combobox 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
                      }
    
    
               }
    

    【讨论】:

    • 也就是说这里要输入高亮逻辑
    猜你喜欢
    • 2015-11-02
    • 1970-01-01
    • 1970-01-01
    • 2015-03-30
    • 1970-01-01
    • 1970-01-01
    • 2019-02-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多