删除angular 4 material 应用程序中md-autocomplete 的自动选择

Question

我有一个 angular 4 应用程序 material 设计。在这个应用程序中，我打开了一个对话框，里面有一个表单。在这种形式中，我在第一个位置有一个自动完成字段。这是我的 html 代码：

<div class="containerDialog">
<h1 md-dialog-title>Add porject</h1>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <md-input-container>
            <input mdInput type="text" mdInput [mdAutocomplete]="project" placeholder="Selectionner un projet">
        </md-input-container>
        <md-autocomplete #project="mdAutocomplete">
            <md-option *ngFor="let project of projectsList" [value]="project.name">
                {{ project.name}}
            </md-option>
        </md-autocomplete>
    </div>
</form>
<div md-dialog-actions>
    <button md-button md-dialog-close="close">Cancel</button>
    <button md-button md-dialog-close="save">Save</button>
</div>

当我打开对话框时，自动完成输入被选中，所以 project.name 的列表出现时没有点击输入。

那么，你知道我该怎么做才能在打开时不选择输入，而是在我单击它时才选择输入吗？

Answer 1

我有一些类似的问题。对我来说，将 cdk-focus-region-start 添加到容器中是可行的。

在你的情况下试试这个：

<div cdk-focus-region-start class="form-group">
  <md-input-container>
    <input mdInput type="text" mdInput [mdAutocomplete]="project" placeholder="Selectionner un projet">
  </md-input-container>
  <md-autocomplete #project="mdAutocomplete">
    <md-option *ngFor="let project of projectsList" [value]="project.name">
            {{ project.name}}
  </md-option>
</md-autocomplete>

如果这不起作用，请尝试将 cdk-focus-region-start 添加到父 form 并将其从 div 中删除。

删除angular 4 material 应用程序中md-autocomplete 的自动选择

Remove the automatically selection of md-autocomplete in angular 4 material application

angular-material

md-autocomplete

angular