angular – 如何停止mat-autocomplete以获取除给定选项之外的自

发布时间：2020-12-17 17:43:36 所属栏目：安全来源：网络整理

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

我正在使用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>

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

解决方法

You can do something like this

标记：

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

零件：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!