Question

我有一个表单，我想在提交时获得datalist选项属性。你有什么想法可以帮助我解决这个问题。我在stackblitz上创建了一个类似的场景

https://stackblitz.com/edit/datalist-attr-problem

我不能使用select，因为列表非常广泛，因此使用datalist会更好。

我希望在控制台上记录所选的消息ID。

Answer 1

好像您正在尝试实现自动完成功能。不幸的是，datalist不包含id的任何类型的option属性。它仅提供input的预定义选项的列表。您可以在选项上设置属性，并使用input中的值从DOM中获取属性值，但是最好使用JavaScript来获取值。

从模板中，发送input引用而不是option（如果使用ngModel或formControl，则不需要此步骤）

<form (ngSubmit)="logMessageId(message)">
    <input class='form-control' list="equipment_name_list" name='equipment_name' #message>
    <datalist name="equipment_name_list" id="equipment_name_list">
        <option *ngFor="let message of messages" [value]="message.text"></option>
    </datalist>

    <button>Send</button>
</form>

然后在组件中使用find从列表中获取值。

logMessageId(el){
    const message = el.value; // Use the ngModel or formControl value here instead if used
    const selectedMessage = this.messages.find(m => m.text === message);
    const messageId = (selectedMessage && selectedMessage.id) || message; // Use the message entered by the user if the not selected from the list
    console.log("Message Id: ", messageId);
}

您还可以考虑签出Angular Material的autocomplete组件。

如何在表单提交中传递标签属性？

1 个答案: