Mixing
How to use ngTagsInput in Angular 6?
0
How to create multiple input field dynamically like stack overflow Tags field ?
Component.html
<form name="form" (ngSubmit)="keySkillRequest()">
<div class="form-group">
<label for="lastName"> Key Skills:</label>
<input [(ngModel)]="skills" type="text" name="name" class="form-control" />
</div>
</div>
</form>
angular
asked Nov 21 '18 at 5:37
lpdlpd
327
add a comment |
0
How to create multiple input field dynamically like stack overflow Tags field ?
Component.html
<form name="form" (ngSubmit)="keySkillRequest()">
<div class="form-group">
<label for="lastName"> Key Skills:</label>
<input [(ngModel)]="skills" type="text" name="name" class="form-control" />
</div>
</div>
</form>
angular
asked Nov 21 '18 at 5:37
lpdlpd
327
1
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55
add a comment |
0
0
0
How to create multiple input field dynamically like stack overflow Tags field ?
Component.html
<form name="form" (ngSubmit)="keySkillRequest()">
<div class="form-group">
<label for="lastName"> Key Skills:</label>
<input [(ngModel)]="skills" type="text" name="name" class="form-control" />
</div>
</div>
</form>
angular
asked Nov 21 '18 at 5:37
lpdlpd
327
How to create multiple input field dynamically like stack overflow Tags field ?
Component.html
<form name="form" (ngSubmit)="keySkillRequest()">
<div class="form-group">
<label for="lastName"> Key Skills:</label>
<input [(ngModel)]="skills" type="text" name="name" class="form-control" />
</div>
</div>
</form>
angular
angular
asked Nov 21 '18 at 5:37
lpdlpd
327
asked Nov 21 '18 at 5:37
lpdlpd
327
edited Nov 21 '18 at 6:21
lpd
asked Nov 21 '18 at 5:37
lpdlpd
327
asked Nov 21 '18 at 5:37
lpdlpd
327
asked Nov 21 '18 at 5:37
lpdlpd
327
327
1
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55
add a comment |
1
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55
1
1
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55
add a comment |
2 Answers
2
active
oldest
votes
1
Did you think of using an npm package instead of implementing it by yourself?
PrimeNg - autocomplete (multiple) is a good solution for you.
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
add a comment |
0
Please check below code might be it will help full for you.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-skill',
styles: ['div { border: 1px solid #ccc}'],
template: `
<form [formGroup]="skillForm" (ngSubmit)="keySkillRequest(skillForm.value)">
<div class="row">
<div class="col-md-12" *ngFor="let skill of tagList">
<a href="#" > {{skill}}</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Skill" formControlName="name"> <input type="submit" value="Save" />
</div>
</div>
</form>`,
})
export class SkillComponent {
public skillForm: FormGroup;
tagList: any = ;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.skillForm = this.fb.group({
name: ['', Validators.required]
});
}
keySkillRequest(val) {
this.tagList.push(val.name);
this.skillForm.reset();
}
}
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405835%2fhow-to-use-ngtagsinput-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Did you think of using an npm package instead of implementing it by yourself?
PrimeNg - autocomplete (multiple) is a good solution for you.
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
add a comment |
1
Did you think of using an npm package instead of implementing it by yourself?
PrimeNg - autocomplete (multiple) is a good solution for you.
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
add a comment |
1
1
1
Did you think of using an npm package instead of implementing it by yourself?
PrimeNg - autocomplete (multiple) is a good solution for you.
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
Did you think of using an npm package instead of implementing it by yourself?
PrimeNg - autocomplete (multiple) is a good solution for you.
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
answered Nov 21 '18 at 12:06
benshabatnoambenshabatnoam
1,9301121
1,9301121
add a comment |
add a comment |
0
Please check below code might be it will help full for you.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-skill',
styles: ['div { border: 1px solid #ccc}'],
template: `
<form [formGroup]="skillForm" (ngSubmit)="keySkillRequest(skillForm.value)">
<div class="row">
<div class="col-md-12" *ngFor="let skill of tagList">
<a href="#" > {{skill}}</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Skill" formControlName="name"> <input type="submit" value="Save" />
</div>
</div>
</form>`,
})
export class SkillComponent {
public skillForm: FormGroup;
tagList: any = ;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.skillForm = this.fb.group({
name: ['', Validators.required]
});
}
keySkillRequest(val) {
this.tagList.push(val.name);
this.skillForm.reset();
}
}
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
add a comment |
0
Please check below code might be it will help full for you.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-skill',
styles: ['div { border: 1px solid #ccc}'],
template: `
<form [formGroup]="skillForm" (ngSubmit)="keySkillRequest(skillForm.value)">
<div class="row">
<div class="col-md-12" *ngFor="let skill of tagList">
<a href="#" > {{skill}}</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Skill" formControlName="name"> <input type="submit" value="Save" />
</div>
</div>
</form>`,
})
export class SkillComponent {
public skillForm: FormGroup;
tagList: any = ;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.skillForm = this.fb.group({
name: ['', Validators.required]
});
}
keySkillRequest(val) {
this.tagList.push(val.name);
this.skillForm.reset();
}
}
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
add a comment |
0
0
0
Please check below code might be it will help full for you.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-skill',
styles: ['div { border: 1px solid #ccc}'],
template: `
<form [formGroup]="skillForm" (ngSubmit)="keySkillRequest(skillForm.value)">
<div class="row">
<div class="col-md-12" *ngFor="let skill of tagList">
<a href="#" > {{skill}}</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Skill" formControlName="name"> <input type="submit" value="Save" />
</div>
</div>
</form>`,
})
export class SkillComponent {
public skillForm: FormGroup;
tagList: any = ;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.skillForm = this.fb.group({
name: ['', Validators.required]
});
}
keySkillRequest(val) {
this.tagList.push(val.name);
this.skillForm.reset();
}
}
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
Please check below code might be it will help full for you.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-skill',
styles: ['div { border: 1px solid #ccc}'],
template: `
<form [formGroup]="skillForm" (ngSubmit)="keySkillRequest(skillForm.value)">
<div class="row">
<div class="col-md-12" *ngFor="let skill of tagList">
<a href="#" > {{skill}}</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Skill" formControlName="name"> <input type="submit" value="Save" />
</div>
</div>
</form>`,
})
export class SkillComponent {
public skillForm: FormGroup;
tagList: any = ;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.skillForm = this.fb.group({
name: ['', Validators.required]
});
}
keySkillRequest(val) {
this.tagList.push(val.name);
this.skillForm.reset();
}
}
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
edited Nov 21 '18 at 12:44
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
answered Nov 21 '18 at 9:22
Sanjay KatiyarSanjay Katiyar
39518
39518
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
add a comment |
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
ya this is right only but i want different types like stack overflow tags input field(go to the ASK Questions there is a tags field)
– lpd
Nov 21 '18 at 10:45
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
@lpd I have altered my answer please have look once again.
– Sanjay Katiyar
Nov 21 '18 at 12:44
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405835%2fhow-to-use-ngtagsinput-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
you must need something to click in order to create new filed, right?
– Pardeep Jain
Nov 21 '18 at 5:39
ya right only but using key press event
– lpd
Nov 21 '18 at 5:55