表单验证不适用于Microsoft边缘，文件输入始终无效

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中有一个错误（也可能是Edge），如果它有占位符属性，它会将每个formcontrol标记为脏。请尝试删除占位符属性并测试表单在真实的“原始”状态下是否仍然无效。

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>