Question

我已经使用了角度6的反应式表单验证，表单验证在chrome和fire-fox上可以完美地工作，但是当我在边缘上尝试使用它并在调试后发现输入类型文件始终在ng-invalid中它。

对此我找不到任何帮助。我正在使用表单验证来启用禁用提交按钮，并且由于字段输入类型文件始终无效，因此始终禁用它。我没有做其他的事情，它是简单的反应形式验证。

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中有一个bug（也许还有Edge），如果该bug具有占位符属性，则它将每个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>

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

2 个答案: