如何在Angular中编辑表单字段

Question

我正尝试同时使用mat-input，mat-autocomplete和mat-select，就像下面的设计一样，但是我不太确定如何实现它们的全部功能如果有人可以给我建议或帮助我，那真的很棒。我希望用户能够输入文本并自动显示现有的相似文本（如果列表中有一个文本），并且用户还可以通过单击右侧的向下图标来立即查看所有列表。

    <mat-form-field class="demo-chip-list" appearance="fill">
        <mat-chip-list #chipList>
            <mat-chip  *ngFor="let chip of chips" [selectable]="selectable" [removable]="removable" (removed)="removeTags(chip)">
                {{chip.tag}}
            </mat-chip>

            <input matInput  #input [(ngModel)]="tagIn" placeholder="Select or Create a tag" [formControl]="tagCtrl2" [matAutocomplete]="auto" [matChipInputFor]="chipList" />
        </mat-chip-list>

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                {{tag}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

我正试图这样做。

Answer 1

我在Angular Material文档中找到了一些东西

https://material.angular.io/components/autocomplete/examples

转到“选项组自动完成”，这是显示列表并允许用户键入所需内容的一种很好的方法。

Answer 2

我认为这应该可行。

    <mat-form-field>
        <label for="tagInput">Select or Create a tag</label>
            <input matInput [formControl]="tagCtrl2" [matAutocomplete]="auto"/>
            <mat-autocomplete id="tagInput" #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="tag of filteredTags | async" [value]="tag">
                    {{ tag }}
                </mat-option>
            </mat-autocomplete>
    </mat-form-field>