web-dev-qa-db-ja.com

mat-autocompleteを停止して、指定されたオプションとは別にカスタムユーザー入力値を取得する方法

Material.angular.ioのmat-auto completeコンポーネントを使用しています。デフォルトの動作では、ユーザーは任意の値を入力でき、オプションを選択できます。また、選択した値に入力を追加できます。ここで例を確認できます。 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>

しかし、フォームフィールドには、指定されたオプションの値のみを使用し、指定されたオプション以外の値をユーザーが入力できないようにします。これを達成する方法は？これは、オートコンプリート機能を備えた選択入力のようなものです。

angulartypescriptangular-material
12
Hungry for Challange

このようなことができます

マークアップ：

<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);
    }
}
5
Ketan Akbari

@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ドロップダウンをお勧めします https://www.primefaces.org/primeng/#/dropdown

1
David Votrubec

チップのオートコンプリートのマテリアルデモ は、inputとmat-autocomplete：

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

オートコンプリートのオプションのみを許可する場合は、入力からadd関数を省略します。

0
adamdport

私はここにUI/UXの質問があると思います-ユーザーがオプションのリストにないものを入力することをどのように防ぎますが、それでも文字列でフィルタリングすることはできますか？

いくつかの潜在的なオプションがあります。最初のオプションは、オプションが入力に隣接するリストにない場合にエラー「無効なエントリ」を表示することです。 2番目のオプションは、どのオプションにも一致しない文字の入力を実際に防ぐことです。したがって、単一のオプション「foo」があり、ユーザーが「for」と入力した場合、「fo」のみが受け入れられ、「r」がスローされます。

PrimeNg ソリューションは、ユーザーがフォーカス時に入力を開始できるテキストフィールドとはまったく異なります。ユーザーは最初にクリックして検索を開く必要があり、キーボードからはアクセスできないようです。ロゴが表示されていることを除いて、表示と検索が同じになるように実装されていない理由は実際にはわかりません。

0
Mark