0

ドロップダウンを持つ別のコンポーネントから使用するメインコンポーネントがありますがtag-input、フォームを送信すると、tag-input選択したアイテムが正しく送信されず、最後に選択したアイテムの1文字のみが投稿されます。

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>

そのコンポーネントクラス内には、という名前のcreate関数があり、その関数は正しく機能しています。以下はnationalityコンポーネントです：

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']);
      }
   });
 }
}

ここに画像の説明を入力ここに画像の説明を入力

4

1 に答える 1

0

以下のコードを試してください..

<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>

また

<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>

typescript クラスで selectedValue にアクセスする

于 2017-02-28T05:51:23.033 に答える