使用Angular和< input>进行多选下拉菜单标签 [英] Multiple select Dropdown using Angular with <input> tag

问题描述

我正在构建angular 6应用程序，其中需要使用<input>文本框而​​不使用<select>进行多选下拉列表.

I am building up angular 6 application, in which i am in the need to make a multi select dropdown using <input> text box without using <select>.

HTML :

<form>
  Select User: <input type="text" name="user" [value]="users"><br>
  <button type="submit"> Submit </button>
</form>

Ts :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

我还需要使用纯Javascript，Tpescript ，以及没有第三方或jquery .

还建议不使用html 数据列表.

Also recommended not to use html datalist.

我进行了很多搜索，但找不到合适的解决方案. 请帮助我达到目标.

I have a lot of search for it but couldn't find a proper solution for it. Kindly help me to achieve the result.

Stackblitz : https://stackblitz.com/edit/angular- v7kmbq

推荐答案

以下是工作代码，我使用了[[ngModel)]而不是formcontrols:

Here is the working code, I used [(ngModel)] instead formcontrols:

https://stackblitz.com/edit /angular-qjrhs5?file=src%2Fapp%2Fapp.component.css

这篇关于使用Angular和< input>进行多选下拉菜单标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！