Question

我想在Angular 2中使用多选，但我还没有找到一个正常工作的多选。

ng2-complete（在表单内部时不调用onselect函数）
ss-multiselect-dropdown（在表单内部时不会调用ngModelChange）
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

Caused by: com.zaxxer.hikari.pool.HikariPool$PoolInitializationException: Failed to initialize pool: DataSource router not initialized
    at com.zaxxer.hikari.pool.HikariPool.throwPoolInitializationException(HikariPool.java:528)
    at com.zaxxer.hikari.pool.HikariPool.checkFailFast(HikariPool.java:520)
    at com.zaxxer.hikari.pool.HikariPool.<init>(HikariPool.java:112)
    at com.zaxxer.hikari.HikariDataSource.<init>(HikariDataSource.java:72)
    at com.lot.common.dataSource.HikariDataSource.<init>(HikariDataSource.java:19)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:57)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:526)
    at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:100)
    ... 66 more
Caused by: java.lang.IllegalArgumentException: DataSource router not initialized
    at org.springframework.util.Assert.notNull(Assert.java:112)
    at org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource.determineTargetDataSource(AbstractRoutingDataSource.java:149)
    at org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource.getConnection(AbstractRoutingDataSource.java:133)
    at com.zaxxer.hikari.pool.PoolBase.newConnection(PoolBase.java:341)
    at com.zaxxer.hikari.pool.PoolBase.newPoolEntry(PoolBase.java:193)
    at com.zaxxer.hikari.pool.HikariPool.createPoolEntry(HikariPool.java:428)
    at com.zaxxer.hikari.pool.HikariPool.checkFailFast(HikariPool.java:499)

listcomponent.ts

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

Answer 2

1。更正结账表格标记

form代码已关闭为</form>而不是<form/>

2. ：正确使用ngModel

将ngModel用作[(ngModel)]而不是[ngModel]

3. 如果在表单标记中使用了ngModel，则必须设置name属性，或者必须将表单控件定义为“＃stand;独立”。在ngModelOptions中。

更新您的s-multiselect-dropdown以包含名称属性，如下所示

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

正确代码

＆＃13;

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

＆＃13;

angular 2 s-multiselect-dropdown在表单元素内部不起作用

2 个答案: