Формы, управляемые моделями - проблема с заполнителем ввода в IE11

Я обновил свое приложение с Angular 2.x до Angular 4.0.0. С этого времени у меня возникает следующая проблема с элементом управления текстовой формой типа ввода:

В IE11 при получении фокуса заполнитель удаляется, а элемент управления формой устанавливается на грязный, а нетронутый - на false. В Chrome / FF эта проблема никогда не возникает.

В IE11 элемент ввода становится грязным, как только он сфокусирован. В отличие от Chrome, например, где вам нужно сначала ввести его.

HTML:

<input 
  type="text" 
  class="form-control" 
  id="processName" 
  [(ngModel)]="process.displayName" 
  [disabled]="isProcessLoading"
  #processName="ngModel"
  maxLength="64" 
  pattern="^.*\S.*" 
  name="processName" 
  placeholder="{{'PROCESS-FORM.name-placeholder' | translate}}"
  required 
  placeholderRequired 
  [inputBinding]="processName" 
/>

Я создал одну директиву, которая в фокусе устанавливает для всех ошибок значение null (действительное).

@Directive({
  selector: '[placeholderRequired]'
})
export class PlaceHolderDirective {
  @Input() inputBinding: any = null;

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('focus', ['$event'])
  handleFocus(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {
      // IE only
      if (!this.inputBinding._control._value) {
        this.inputBinding.control.setErrors(null);
        setTimeout(() => this.inputBinding.control.setErrors(null),0);
      }
    }
  }

  @HostListener('mousedown', ['$event'])
  handleMouseDown(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {

      if (!this.inputBinding._control._value) {
        this.inputBinding.control.setErrors(null);
        setTimeout(() => this.inputBinding.control.setErrors(null),0);
      }
    }
  }

  @HostListener('blur', ['$event'])
  handleBlur(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {
      if (!this.inputBinding._control._value.trim()) {
        // handle blur event
      }
    }
  }
}

Когда пользователь нажимает на поле ввода где-то от значения angular valueAccessor.onValueChanges (), это поле помечается как грязное с помощью control.markAsDirty ().

Я также добавил setTimeout (), но он запускается после выполнения markAsDirty (), что вызывает небольшие колебания в пользовательском интерфейсе (грязное истина -> грязное ложь).

Можно ли с этим поведением справиться с помощью любого другого подхода? Есть ли способ переопределить onValueChanges (), потому что внутренне он устанавливает поле как грязное. Добавление других библиотек (например, placeholder.js) нежелательно.


javascript angular html internet-explorer angular2-forms
person Awadhoot    schedule 08.06.2017    source источник
comment
Похоже, это связано с ошибкой. Об этом уже сообщалось в репозитории angular: github.com/angular/angular/issues/17951 Вы можете изменить этот ответ, чтобы решить эту проблему: stackoverflow.com/questions/33866824/   -  person nircraft    schedule 09.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я настроил первозданный, как показано ниже:

ts файл

iePristine: boolean = true;
pincodeCtrl = <formControl>this.form.get('pincode')
  setPlaceholder() {
    const placeholder = 'Enter Code';
    if (this.pincodeCtrl.value) {
      this.iePristine = false;
    }
    if (this.iePristine) {
      this.pincodeCtrl.markAsPristine();
    }
    return placeholder;
  }

isInvalidControl(control: FormControl) {
    return control.invalid && (control.dirty || control.touched);
  }

html файл

<input type="text" [placeholder]="setPlaceholder()" formControlName="pincode"
            [ngClass]="isInvalidControl(pincodeCtrl) ? 'form-control text-center is-invalid' : 'form-control text-center'" />
person phúc liêm nguyễn    schedule 15.03.2019