如何在Angular 6中使用ngTagsInput？

Question

如何像堆栈溢出标签字段一样动态创建多个输入字段？

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>   

Answer 1

您是否考虑过使用npm软件包而不是自己实现？

PrimeNg - autocomplete (multiple)是您的理想解决方案。

Answer 2

请检查以下代码，可能会对您有帮助。

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();
  }
}