如何使用 Angular2 验证 <input type="file">？答案

【问题标题】：How can I validate <input type="file"> with Angular2?如何使用 Angular2 验证 <input type="file">？
【发布时间】：2018-02-15 17:12:33
【问题描述】：

即使文件有效，ngControl 的值为 new Control('', Validators.required) 也不起作用。

（实际上，我发现验证单选按钮也很困难......）

【问题讨论】：

自行解决。 html <input type="file" (change)="onChange($event)"> ts controlName.updateValue(value)（值通过 FileReader 设置）
嘿@Yusu 你能回答你自己的问题并提供所有对你有用的相关代码吗...？？
@YuSu 您能否提供所有相关代码，因为我无法按照您所说的那样做。如果我尝试使用this.frm.patchValue({ file: evt.target.value });，我得到：无法在“HTMLInputElement”上设置“值”属性：此输入元素接受文件名，该文件名可能只能以编程方式设置为空字符串。
查看我的回答 here 以获得完整的工作示例 + 解释

标签： angular

【解决方案1】：

Validators.required 取决于字段的值。

输入类型file 没有值，因此被视为undefined 或null。

这就是它无效的原因。最好自己编写验证。

自定义文件validation example refer

【讨论】：

【解决方案2】：

与普通 require 属性一起使用的验证器示例可能是这样的

import { Provider, forwardRef, Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, Control } from '@angular/common';
export const NO_ATTACHMENT_VALIDATOR = new Provider(NG_VALIDATORS,{
  useExisting: forwardRef(() => noAttachmentValidator ),
  multi: true
});

@Directive({
  selector: '[noAttachmentValidator][ngControl],[noAttachmentValidator][ngFormControl],[noAttachmentValidator][ngModel]',
  providers: [NO_ATTACHMENT_VALIDATOR]
})

export class noAttachmentValidator implements Validator{
  public validate(control: Control) : { required: { [key: string]: boolean } | null } {
    let state,
        value = control.value,
        alreadyUsed = control.dirty;

    if(alreadyUsed && value.length == 0){
      state = true;
    }
    return state ? { required : { 'required' : false } } : null
  }
}

基本要求的属性是第一次检查，每次之后你第一次使用输入，即使你删除文件（这是我的问题）导致值的控制是空的。当它未被触及时它是空的，然后当你添加一个文件时它会被填充，但如果你删除它它只是一个空数组所以 [] !== 空。我希望这有助于遵循这一点，如果需要，您可以构建自己的验证类型。

【讨论】：

【解决方案3】：

解决这个问题的一个很好的解决方案是创建一个自定义元素来包装你并实现一个 ValueAccessor。通过这种方式，您可以创建一个与其他表单元素完全相同的自定义组件。您可以在组件中使用另一个变量，而不是使用输入值。

【讨论】：