Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/371.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 模型驱动表单-IE11上的输入占位符问题_Javascript_Html_Angular_Internet Explorer_Angular2 Forms - Fatal编程技术网

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

Javascript 模型驱动表单-IE11上的输入占位符问题,javascript,html,angular,internet-explorer,angular2-forms,Javascript,Html,Angular,Internet Explorer,Angular2 Forms,我已将我的应用程序从Angular 2.x更新为Angular 4.0.0。从现在起,输入类型文本表单控件出现以下问题: 在IE11上,当接收到焦点时,占位符被移除,表单控件被设置为dirty,pristine被设置为false。 在Chrome/FF上,此问题从未发生过 在IE11上,输入元素一聚焦就变脏。与Chrome不同的是,你必须先输入它。 HTML: <input type="text" class="form-control" id="processName

我已将我的应用程序从Angular 2.x更新为Angular 4.0.0。从现在起,输入类型文本表单控件出现以下问题:


在IE11上,当接收到焦点时,占位符被移除,表单控件被设置为dirty,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" 
/>
当用户单击输入字段时,位于angular's的某个位置 onValueChanges(),该字段被标记为脏字段,使用 控件。markAsDirty()

我还添加了setTimeout(),但它会在 执行markAsDirty(),这会导致UI中的小波动(dirty 正确->错误)

这种行为可以用其他方法解决吗?
有没有办法重写onValueChanges(),因为它在内部将字段设置为dirty。不需要添加其他库(如placeholder.js)。

我自定义了pristine,如下所示:

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);
  }
iePristine:boolean=true;
pincodeCtrl=this.form.get('pincode')
setPlaceholder(){
常量占位符='输入代码';
if(此.pincodeCtrl.value){
this.iePristine=假;
}
如果(这是原始的){
this.pincodeCtrl.markAsPristine();
}
返回占位符;
}
isInvalidControl(控件:FormControl){
返回control.invalid&(control.dirty | | control.toucted);
}
html文件

<input type="text" [placeholder]="setPlaceholder()" formControlName="pincode"
            [ngClass]="isInvalidControl(pincodeCtrl) ? 'form-control text-center is-invalid' : 'form-control text-center'" />

这似乎与一个bug有关。这已经在angular repo中报告:您可以使用“修改此答案”来修复此问题:
<input type="text" [placeholder]="setPlaceholder()" formControlName="pincode"
            [ngClass]="isInvalidControl(pincodeCtrl) ? 'form-control text-center is-invalid' : 'form-control text-center'" />