如何在 Angular 5 响应式表单中验证所需的文件上传答案

【问题标题】：How to validate required File Upload in Angular 5 Reactive Forms如何在 Angular 5 响应式表单中验证所需的文件上传
【发布时间】：2018-12-06 15:47:27
【问题描述】：

我希望用户单击一个按钮一次上传一个文档。

目前，当用户上传文档时，它会将“文档”控件标记为满意。但是，如果用户尝试上传另一个文档但随后取消，它会将控件标记为不满意。它仍然有第一个文档，但是在文件浏览器上单击取消似乎会让验证器认为没有上传任何文档。我该如何解决这个问题？

在我的 html 中：

<input type="file" formControlName="documents" (change)="uploadDocument($event.target.files)">

在我的 .ts 中：

this.formGroupName=this.formBuilder.group({
  documents: ['', Validators.compose([Validators.required])]
});

现在我的 upoadDocument() 函数对验证没有任何作用。

【问题讨论】：

我认为change 事件会在用户上传或不上传时触发，因此您的uploadDocument 可能会触发两次
那么我是否必须在我的 uploadDocument 函数中实现一些东西？我可以手动操作是否满足必填字段吗？
在你的 app.module.ts 中你导入了：>import { FormsModule } from '@angular/forms';您是否将 FormsModule 添加到您的导入中？
是的，导入设置正确...我认为这不是导入问题。我在某处缺少逻辑

【解决方案1】：

所以我自己解决了这个问题。我最终做的是在尝试上传文档时订阅更改事件，然后根据一些条件手动使验证器无效或验证。

更多关于这个话题的信息可以在这里找到：How can I manually set an Angular form field as invalid?

【讨论】：