使用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屋!