在设置占位符的情况下，Internet Explorer 11在页面加载时调用matInput的输入事件

Question

我发现有一个IE错误，其中设置占位符将输入事件称为described here。这是在页面加载时发生的，因此没有用户交互。

我的代码：

app.component.html

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange('test')">
</mat-form-field>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  ngOnInit() {
  }

  onValueChange(value: string) {
    console.log("should not be in here");
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatCardModule } from '@angular/material/card';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatCardModule, MatFormFieldModule, MatInputModule, MatDialogModule, BrowserAnimationsModule, MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是the stackblitz project，但无法使用IE11进行调试。在我的真实项目中，我有一个ngFor，它创建了多个输入元素。

我尝试了here中的方法，但没有成功：

app.component.html

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange($event)" (focus)="onFocus($event)" (blur)="onFocus(null)">
</mat-form-field>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  selectedElement: any;

  ngOnInit() {
  }

  onValueChange(event) {
    if (event && this.selectedElement && event.target == this.selectedElement) {
        console.log(event.target.value)
    }
  }

  onFocus(event) {
    if(event){
       this.selectedElement = event.target;
    } else {
       this.selectedElement = null; 
    }
    console.log(this.selectedElement);
  }
}

这种方法的问题是，在输入元素中单击或单击时，将调用onValueChange()事件。但这仅应在用户更改值（输入/删除一些字符）的情况下调用。

是否有解决方案？

演示问题

Answer 1

我尝试使用IE 11浏览器测试您的示例代码。我发现输入事件没有在页面加载时被调用。输入更改后通常会发生。

测试结果：

我建议您再次测试该问题，并使用一个新的空项目检查结果。

让我知道我是否错过了测试的任何步骤。我将再次尝试测试问题以检查结果。