删除角度 4 材料应用中自动选择 md-自动完成功能

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中删除。