首页 文章

如何停止mat-autocomplete以获取除给定选项之外的自定义用户输入值？

提问于
浏览 次
4

我正在使用material.angular.io中的mat-auto完整组件 . 默认行为是用户可以输入任何值，并提供可供选择的选项 . 您还可以将输入添加到所选值 . 你可以在这里查看示例 . https://stackblitz.com/angular/ngmvgralayd?file=app%2Fautocomplete-simple- example.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>

但我希望表单字段仅从给定选项中获取值，并希望除了给定选项之外，不希望用户输入任何值 . 怎么做到这一点？它就像具有自动完成功能的选择输入 .

angular typescript angular-material

3 回答

  • 0

    你可以做这样的事情

    Markup:

    <md-input-container class="full-width">
<input mdInput [mdAutocomplete]="autoData"
       #searchMyData
       formControlName="myControl"
       (keyup)="changeMyControl()">
</md-input-container>
<md-autocomplete #autoData="mdAutocomplete">
<md-option
    *ngFor="let option of options"
    [value]="option.name"
    (onSelectionChange)="onSelectedOption($event.source.selected, option.id);">
    {{ option.name }}
</md-option>
</md-autocomplete>

    Component:

    selectedOption;
changeMyControl(): void {
    if (isUndefined(this.selectedOption) {
        // also check selected item and entered text are not same
        this.myForm.get('myControl').setErrors({'incorrect': true});
    }
}

onSelectedOption(isSelected: boolean, id: number): void {
    if (isSelected) {
        setTimeout(() => {
            const option = this.options.filter(bt => bt.id === id);
            if (option.length > 0) {
                this.selectedOption= option[0];
               // patch formcontrol value here
            }
        }, 200);
    }
}
    回复于
  • 4

    正如@trichetriche在评论中已经提到的那样，这是select的用例 .

    你可以使用select的材料版本，就像这样

    <mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

    如果您需要选择上方的过滤器，那么我建议您使用PrimeNg Dropdown https://www.primefaces.org/primeng/#/dropdown

    回复于
  • 1

    Material demo for chips autocomplete显示 input 和 mat-autocomplete 的绑定：

    <input (matChipInputTokenEnd)="add($event)">
<mat-autocomplete (optionSelected)="selected($event)"></mat-autocomplete>

    如果您只想允许自动完成中的选项，只需从输入中省略 add 函数 .

    回复于

相关问题