Question

使用材料的mat-autocomplete完成。

关于输入的模糊，调用“validate”函数来检查用户是否写了有效值（不在列表中选择它）。

如果是，则代码为他“选中”，如果无效，则清除输入值。

这是针对用户编写值并且未从列表中选择它的情况。

<mat-form-field>
   <input matInput placeholder="city"
          [matAutocomplete]="cityAuto"
          formControlName="city"
          (blur)="validate()"/>
   <mat-autocomplete #cityAuto="matAutocomplete"
                     [displayWith]="displayFn">
      <mat-option *ngFor="let city of cities | async" [value]="city">
        <span>{{city.name}}</span>
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

TS：

validate(){
  let val = this.locationForm.controls['city'].value;
  if (citiesListContainsValue(val)){
      this.locationForm.patchValue({
                       city:getItemFromcitiesList(val)
      });
  } else {
         form.patchValue({
              city:{code:-1,name:''}
          });
  }
}

现在这是一个有问题的案例：

如果用户开始输入输入（例如，他写了“新建”），然后打开了自动完成列表，并且用户使用鼠标单击<选择了一个选项（例如“纽约”） / strong>，然后触发validate函数，但控件的值（“this.locationForm.controls ['city']。value”）只是用户键入的内容（“新建”）所以验证功能清除输入，这当然不是预期的行为。

我需要在validate（）函数中有一个指示，知道用户是否只是用鼠标单击列表中的值，如果是这样 - 只需跳过此功能。

知道怎么做吗？还是一个不同的想法？

Angular2材料 - 需要通过鼠标点击选择mat-autocomplete值

0 个答案: