angular 2 s-multiselect-dropdown不能在表單元素內工作

Question

我想在Angular 2中使用多選，但是我還沒有找到可以正常工作的多選。

1. ng2-complete（不打電話的時候表單內onselect功能）
2. ss-multiselect-dropdown（不叫ngModelChange當表單內）
3. angular2-multiselect（表單內時不顯示風格以及）

我需要使用表單元素，因爲我想驗證控件

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下拉的問題。也許可以給你一些啓示

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標籤被關閉的</form>不如<form/>

2.的ngModel

正確用法使用ngModel作爲[(ngModel)]代替[ngModel]

3.如果ngModel是一個形式標籤內使用，無論是名稱屬性必須設置或形式控制必須在ngModelOptions中定義爲「獨立」。

更新您的s-multiselect-dropdown包括name屬性如下

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