CODEWITHSUNDEEP
angulartypescriptng2-tag-input
jones
jones

Reputation: 1453

Angular2 tag-input inside child component can't submit all selected tags

I have a main component, inside that i use from another component that has tag-input dropdown, but when i submit the form tag-input selected items are not submitted properly, only one character of last selected item is posted.

main component:

<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <form #myForm="ngForm" novalidate>
        <nationality name="nationalities" ngModel ngDefaultControl></nationality>
        <button type="button" (click)="create(myForm)" class="btn btn-primary">Submit</button>
     </form>
   </div>
  </div>
</div>

and inside its component class i have a function named create, that function is working properly. now bellow is the nationality component:

import { Component, Input } from '@angular/core';
import { Http } from '@angular/http';
import { NgForm, ControlValueAccessor } from '@angular/forms';

@Component({
   selector: 'nationality',
   template: `
      <label class="form-control-label" for="nationalities">Nationality</label>
      <tag-input ngModel id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
        <tag-input-dropdown [autocompleteItems]="nationalities">
        </tag-input-dropdown>
      </tag-input>
   `
})

export class NationalityComponent {
  private tempNationalities;
  private nationalities = [];
  @Input() job;
  constructor(private _http: Http) {
    this._http.get('/api/nationalities')
    .subscribe((res)=>{
      this.tempNationalities = res.json();
      for (let k in this.tempNationalities) {
        this.nationalities.push(this.tempNationalities[k]['name_en']);
      }
   });
 }
}

enter image description hereenter image description here

Upvotes: 0

Views: 718

Answers (1)

raj m
raj m

Reputation: 2023

Try below code..

<select id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" name="nationalities" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true"[(ngModel)]="selectedValue">
           <option *ngFor="let nation of nationalities">{{nation}}</option>
</select>

or

<tag-input [(ngModel)]="selectedValue" id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [autocompleteItems]="nationalities">
    </tag-input-dropdown>

Now access selectedValue in your typescript class

Upvotes: 0

Related Questions