如果使用UI-Bootstrap's typeahead指令没有找到匹配项，则窗体不可编辑

Form not editable if no match is found using UI-Bootstrap's typeahead directive?

本文关键字：编辑 窗体 UI-Bootstrap 指令 typeahead 如果      更新时间：2023-09-26

下面是设置预选输入框的相关代码。从本质上讲，用户输入一个名称，然后将相关信息加载到表单的其余部分。在没有找到匹配的情况下，我希望用户仍然能够在表单中输入名称和相关信息。

当没有找到匹配项时，表单不可编辑。例如，如果在名称中输入"John Doe"，没有匹配项，则无法在"address"输入框中输入，其代码如下所示。

Typeahead: 

<label for="participant-name">Name</label>
<input name="participant-name" typeahead="participant as participant.name for participant in participants | filter:$viewValue | limitTo: 8" type="text" class="form-control" ng-model="entry.participant">

示例输入框:

<label for="participant-street-no">Address</label>
<input name="participant-street-no" type="text" class="form-control" ng-model="entry.participant.street">

这是因为当您在预先输入的条目中键入字符串时。Participant现在是那个字符串，而不是对象。你不能给字符串加上。street。相反，您需要创建一个新对象，取条目。参与者字符串，并将其作为.name分配给该对象，然后设置条目。参与者到对象。

我是这样做的:首先将typeahead edit设置为false。在typeahead输入框中添加一个按钮(bootstrap的输入组在这方面做得很好)，显示"New"并隐藏typeahead，并将其替换为另一个具有entry.participant.name模型的输入框。一旦他们点击新建，设置条目。参与者={}。此时你也可以将"New"替换为"Cancel"或"X"。

编辑

这是一个活塞!我保持预先输入可编辑，这样您就可以看到当您选择Bob或Jim时与仅键入字符串时模型的不同之处。否则，模型将不会被设置，直到您从下拉菜单中选择一些内容。

相关文章：