角度2 s-multiselect-dropdownはフォーム要素内では機能しません

Question

角度2のマルチセレクトを使用したいのですが、正常に動作するマルチセレクトが見つかりませんでした。

1. ng2-complete
2. ss-multiselect-dropdown（ときフォーム内ngModelChangeを呼び出すことはありません）
3. angular2-multiselect（ときに、フォーム内のほかのスタイルを示していない）

（フォーム内の onselect関数を呼び出していません）

コントロールを検証したいのでフォーム要素を使用する必要があります

s-multiselect-dropdown MultiSelectとFilterモードも機能しません。

 <form #f="ngForm" novalidate> 
       <ss-multiselect-dropdown [options]="paymentTypeInfo"          
        [ngModel]="selectedTexts" (ngModelChange)="onChange($event)" > 
       </ss-multiselect-dropdown> 
      <button type="submit" class="button"(click)=savePersonDetails(f.valid)>Submit</button> 
      <form/> 
       paymentTypeInfo: PaymentTypeInfo[] = []; 
       selectedTexts: number[] = []; 
        this.PaymentTypeInfo= [ 
         { "id": 1, "name": "India" }, 
         { "id": 2, "name": "Singapore" }, 
         { "id": 3, "name": "Australia" }, 
         { "id": 4, "name": "Canada" }, 
         { "id": 5, "name": "South Korea" }, 
         { "id": 6, "name": "Germany" }, 
         { "id": 7, "name": "France" }, 
         { "id": 8, "name": "Russia" }, 
         { "id": 9, "name": "Italy" }, 
         { "id": 10, "name": "Sweden" } 
        ]; 
     savePersonDetails(isValid: boolean) {   
      if (isValid) 
       { 
       console.log("selectedTexts"); 
       console.log(this.selectedTexts); 
       } 
      } 
public onChange(): void { 
     alert("hi"); 
     console.log(this.selectedTexts); 
    } 

Answer 1

私は誰かがこのPlunkerのドロップダウンで問題を解決するのを手助けしました。多分それはタグが</form>として閉じている

formあなたの終値のformタグ

listcomponent.html

<table> 
    <tr *ngFor="#number of numbers"> 
    <td> 
     <label>Country:</label> 
     <select [(ngModel)]="selectedCountry[number].id" 
     (ngModelChange)="onSelect($event, number)"> 
      <option value="0">--Select--</option> 
      <option *ngFor="#country of countries" 
      value={{country.id}}>{{country.name}} 
      </option> 
     </select> 
    </td> 
    <td> 
     <div> 
     <label>State:</label> 
     <select> 
      <option *ngIf='selectedCountry[number].id == 0' 
       value="0">--Select--</option> 
      <option *ngFor="#state of states[number]" 
       value={{state.id}}>{{state.name}}</option> 
     </select> 
     </div> 
    </td> 
    </tr> 
</table> 

listcomponent.ts

import { Component } from 'angular2/core'; 
import { DataService } from './dataservice'; 
import { Country } from './country'; 
import { State } from './state'; 

@Component({ 
    selector: 'my-country-list', 
    templateUrl: 'app/countrylistcomponent.html', 
    providers: [DataService] 
}) 
export class CountryListComponent { 
    selectedCountry:Country[] = [new Country(0, 'India'), 
           new Country(0, 'India'), 
           new Country(0, 'India')]; 
    countries: Country[]; 
    states: State[] = [[] as State[],[] as State[],[] as State[]] 

    constructor(private _dataService: DataService) { 
    this.numbers = Array(3).fill().map((x,i)=>i); 
    this.countries = this._dataService.getCountries(); 
    } 

    onSelect(value,index) { 
    this.states[index] = this._dataService.getStates(). 
     filter((item)=> item.countryid == value); 
    } 
} 

Answer 2

1.修正してあなたにいくつかのインスピレーションを与えることができます<form/>

ngModelがいずれかの名前属性が設定されなければならない、またはフォームコントロール、フォームタグ内で使用される場合[(ngModel)]として代わりに[ngModel]

ngModelを使用しngModel

の正しい使い方ngModelOptionsでは 'スタンドアロン'として定義する必要があります。

従う

<ss-multiselect-dropdown [options]="paymentTypeInfo"          
[(ngModel)]="selectedTexts" (ngModelChange)="onChange($event)" name="select"> 

正しいコードが

<form #f="ngForm" novalidate> 
 
     <ss-multiselect-dropdown [options]="paymentTypeInfo"   
 
      [(ngModel)]="selectedTexts" 
 
      (ngModelChange)="onChange($event)" 
 
      name="select"> 
 
     </ss-multiselect-dropdown> 
 
     <button type="submit" class="button" 
 
      (click)=savePersonDetails(f.valid)> 
 
      Submit</button> 
 
<form/>