angular - 如何停止 mat-autocomplete 以将自定义用户输入值与给定选项分开？

Question

我正在使用来自 material.angular.io 的 mat-auto 完整组件。默认行为是用户可以输入任何值，并提供可供选择的选项。您也可以将输入添加到所选值。您可以在此处查看示例。 https://stackblitz.com/angular/ngmvgralayd?file=app%2Fautocomplete-simple-例子.html

这是我用来生成自动完成输入字段的代码。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" disabled="true">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

但我希望表单字段仅从给定选项中获取值，并希望防止用户输入给定选项以外的任何值。如何做到这一点？这就像选择具有自动完成功能的输入。

Answer 1

在 github 上找到了这个解决方案它可能会为那些最终来到这里的人提供一个简单的替代方案。

创建自定义验证器:

private requireMatch(control: FormControl): ValidationErrors | null {
  const selection: any = control.value;
  if (this.options && this.options.indexOf(selection) < 0) {
    return { requireMatch: true };
  }
  return null;
}

将它附加到您的控件(我们需要将它绑定(bind)到此，以便我们的验证器可以访问我们组件范围内的选项)

  myControl = new FormControl(undefined, [Validators.required, this.requireMatch.bind(this)]);

可选择显示错误:

  <mat-error *ngIf="myControl.errors?.requireMatch">Value need match available options</mat-error>

这里的例子 ----------> https://stackblitz.com/edit/angular-hph5yz