angular 2 s-multiselect-dropdown在表單元素內部不起作用

Question

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

1. ng2-complete （在表單內時不調用onselect函數）
2. ss-multiselect-dropdown （在表單內部時不調用ngModelChange ）
3. angular2-multiselect （在表單內部時顯示樣式不佳）

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

s-multiselect-dropdown多重選擇和過濾器模式也不起作用。

       <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中設置name屬性或將表單控件定義為“獨立”。

更新您的s-multiselect-dropdown使其包含名稱屬性，如下所示

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