模型驱动的表单 - IE11上的输入占位符问题

Question

我已将我的应用程序从Angular 2.x更新为Angular 4.0.0。从这个时候开始，我遇到了输入类型文本表单控件的以下问题：

在IE11上，当获得焦点时，删除占位符并将表单控件设置为脏，并将pristine设置为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（）会导致UI的波动很小（脏   是的 - ＆gt;肮脏的假。）

这种行为可以用其他方法解决吗？ 有没有办法覆盖onValueChanges（），因为在内部它将字段设置为脏。不需要添加其他库（如placeholder.js）。

Answer 1

我按如下方式定制了原始的东西：

ts文件

  iePristine：boolean = true;
pincodeCtrl =  this.form.get（'pincode'）
  setPlaceholder（）{
    const占位符='输入代码';
    如果（this.pincodeCtrl.value）{
      this.iePristine = false;
    }
    如果（this.iePristine）{
      this.pincodeCtrl.markAsPristine（）;
    }
    返回占位符；
  }

isInvalidControl（control：FormControl）{
    返回control.invalid &&（control.dirty || control.touched）；
  }
 

html文件