2

我有一个带有材料设计的 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无需单击输入即可显示列表。

那么，你知道我该怎么做才能在开始时不选择输入，而只是在我点击它的时候？

4

1 回答 1

2

我有一些类似的问题。对我来说，添加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.

于 2017-07-18T08:40:47.230 回答