Question

我在我的应用程序中使用ReactiveForms。验证器在Chrome中按预期工作，但在IE11中没有。不幸的是，我无法让Plunkr在IE11中工作，并被告知 Angular2 Gitter Angular2掠夺者不能在IE11中工作，但也许我的问题在Edge中是可重现的（我现在无法访问Edge）。

我保持这个例子尽可能简单。在IE11中存在多个选择时会发生此问题。我在required上设置了minLength(1)验证程序和FormControl验证程序。单击其中一个选项，然后单击选择器外部时，将弹出验证错误。这不是预期的结果。在模糊事件中取消选择与所选项目类似的行为。

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

表单类

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中为Angular 2 ReactiveForms的multiselect进行点击交互的行为是错误的。只要单击multiselect中的元素，就会注册click事件;通过突出显示具有灰色背景的元素来表示这一点。但是，该元素实际上并未被选中。这通常需要多次点击，并以蓝色背景表示。我不是100％正在进行的事情，但我正在进行代码修复，可能在main.ts，因为我的应用程序中的所有多选项都会发生这种情况。

Answer 1

不幸的是，除了为IE的index.html添加填充程序之外，在没有太多代码修复的情况下，这在应用程序中是一个非常奇怪的缺陷。

在应用程序中，我们捕获IFrame mousedown事件以关闭任何下拉列表。事实证明，我们试图在Event上实例化一个新的document并且IE不支持Event构造函数。

IE11中的多个选择中断的验证

1 个答案: