表单验证在Microsoft edge上不起作用，文件输入始终无效

Question

我已经为angular 6使用了反应式表单验证，表单验证在chrome和fire-fox上工作得很好，但当我在边缘尝试它时，在调试后我发现输入类型文件中总是有ng-invalid类。

在这方面我找不到任何帮助。我使用表单验证来启用禁用提交按钮，但它始终处于禁用状态，因为字段input-type-file总是无效的。我没有做一些不同的事情，它是简单的反应式表单验证。

Html代码

<form [formGroup]="accountForm" (ngSubmit)="onAccountSave()" >

<div class="form-group required col-md-3">
     <label class="control-label mb-10 text-left">Photo Back</label>
    <input type="file" placeholder="Photo" formControlName="photo_back" (change)="onBackFileChanged($event)" >
</div>

<div class="form-group col-md-12">
   <input [disabled]="this.accountForm.invalid" class="btn btn-primary" type="submit" value="Save">
</div>

Ts代码

 this.accountForm = this.formBuilder.group({
      // other fields .....
      photo_back : ['', Validators.required],

    });

polyfill.ts

 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';  // Included with Angular CLI.

Answer 1

我还不能评论，因为我的分数很低，但我想告诉你，在IE11 (也许边缘也是)中有一个错误，如果它有一个占位符属性，就会将每个表单控件标记为脏的。请尝试删除占位符属性，并测试表单在真正的“原始”状态下是否仍然无效。

Answer 2

您可以引用this sample并尝试在输入文件中添加所需的属性：

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" required>
  </label>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>