Javascript 模型驱动表单-IE11上的输入占位符问题
我已将我的应用程序从Angular 2.x更新为Angular 4.0.0。从现在起,输入类型文本表单控件出现以下问题: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
在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'" />