在IE11中對多個選擇中斷進行驗證

我在我的應用程序中使用了ReactiveForms。驗證器在Chrome中按預期工作，但不在IE11中。不幸的是，我無法讓Plunkr在IE11中工作，並被告知Angular2 Gitter，Angular2 Plunkers不能在IE11中工作，但也許我的問題在Edge中是可重現的（我沒有訪問權限邊緣在此刻）。在IE11中對多個選擇中斷進行驗證

我保持示例儘可能簡單。在IE11中有多個選擇時會出現問題。我正在設置required驗證程序和minLength(1)驗證程序FormControl。當我單擊其中一個選項時，然後單擊選擇器外部時，彈出驗證錯誤。這不是預期的結果。它的行爲與所選項目在blur事件中被取消選擇一樣。

http://plnkr.co/edit/eZfbnzDz3jx9NcnaO51R?p=preview

Form類

import {Component} from '@angular/core'; 
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; 

@Component({ 
    selector: 'multiple-selector-form', 
    templateUrl: './src/multiples-selector-form.html' 
}) 

export class MultipleSelectorForm { 
    availableSelectItems: Array<any> = [ 
    {type: 'H', display: 'High'}, 
    {type: 'L', display: 'Low'} 
    ]; 
    multipleSelectorForm: FormGroup; 
    selectItemsCtrlRef: FormControl; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    this.multipleSelectorForm = this.fb.group({ 
     selectItems: [null, [Validators.required, Validators.minLength(1)]] 
    }); 
    } 
}

HTML表單

<form [formGroup]="multipleSelectorForm"> 
    <div> 
    <label for="multipleItemSelector">Multiple Items Selector</label> 
    <select formControlName="selectItems" multiple="multiple"> 
     <option *ngFor="let item of availableSelectItems" [ngValue]="item"> 
     {{item.display}} 
     </option> 
    </select> 
    <div *ngIf="selectItemsCtrlRef?.invalid && (selectItemsCtrlRef?.dirty || selectItemsCtrlRef?.touched) && (selectItemsCtrlRef?.errors?.required || selectItemsCtrlRef?.errors?.minLength)"> 
     Selection is required 
    </div> 
    </div> 
</form>

再次，這是不是在Chrome重複性好，但我把Plunkr那裏的情況下，在Edge中是可重現的。我目前無法訪問Edge，但在當天晚些時候。總結一下，我希望驗證器的行爲與預期的一樣，在選擇器中選擇一個項目並在其外部單擊後，它不會顯示。

更新1

我錯了有關如何點擊與多選在IE11角2個ReactiveForms相互作用的行爲。無論何時單擊多選中的元素，都會註冊點擊事件;這是通過突出顯示具有灰色背景的元素來標誌的。但是，該元素實際上並未被選中。這通常需要多次點擊，並用藍色背景表示。我不是100％發生了什麼，但是我正在進行代碼修復，可能在main.ts之後，因爲這發生在我的應用程序中的所有多選中。

來源

2016-11-15 BrianRT

不幸的是，除了在IE瀏覽器中添加墊片index.html之外，這在應用程序中顯然是一個非常奇怪的缺陷，沒有太多的代碼修復。

在應用程序中，我們捕獲IFrame mousedown事件以關閉任何下拉菜單。事實證明，我們試圖實例化一個新的Event以在document上發送，IE不支持Event構造函數。

來源

2016-11-17 18:41:24 BrianRT

在IE11中對多個選擇中斷進行驗證

回答

相關問題