删除 Angular 4 材质应用程序中 md-autocomplete 的自动选择

Question

我有一个带有材料设计的 Angular 4 应用程序。在这个应用程序中，我打开一个对话框，里面有一个表格。在这种形式中，我在第一个位置有一个自动完成字段。 这是我的 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 中删除。