当前位置: 首页 > 知识库问答 >
问题:

自定义验证在Angular中不起作用

白越
2023-03-14

我在Angular中有一个自定义验证的表单构建器,但我在自定义验证中读取文件后无法获取文件的类型。

下面是StackBlitz:

https://stackblitz.com/edit/Angular-ivy-atwqqc?file=src%2fapp%2fapp.component.ts

TS文件

function checkFileType(
  control: AbstractControl
): { [key: string]: any } | null {
  const files: File = control.value;
  const errors: string[] = [];

  if (files) {
    console.log(files);
    if (files.type === "txt") {
      errors.push(`${files[0].name} has an invalid type of unknown\n`);
    }
    console.log(files.type); //This is always null. How can I get file type

    return errors.length >= 1 ? { invalid_type: errors } : null;
  }

  return null;
}


  onSelection($event) {
    const fileReader = new FileReader();
      const file = $event.target.files[0];
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        this.reactiveForm.patchValue({
          file: fileReader.result
        });
      };  
  }

共有1个答案

仰雅昶
2023-03-14

问题来自readAsDataURL()。它将其编码为一个基本的64字符串,这意味着它没有属性type可供查看。事实上,它没有任何类型可供查看,因为它是字符串而不是文件。如果删除此选项,并将file变量设置为表单,则可以获得所需的属性

function checkFileType(
  control: AbstractControl
): { [key: string]: any } | null {
  const file: File = control.value;
  const errors: string[] = [];

  if (file) {
    console.log(file);
    if (file.type === "txt") {
      errors.push(`${file.name} has an invalid type of unknown\n`);
    }
    console.log(file.type); //This is always null. How can I get file type

    return errors.length >= 1 ? { invalid_type: errors } : null;
  }

  return null;
}


  onSelection($event) {
    const fileReader = new FileReader();
      const file = $event.target.files[0];
      fileReader.onload = () => {
        this.reactiveForm.patchValue({
          file: file
        });
      };  
  }
 类似资料:
  • 我在验证Angular 7中模糊的确认传递字段时遇到问题。在我的例子中,我构建了多个自定义验证器,这些验证器在控件变为“脏”后工作,还有一个遵循Pascal Prechts教程的指令,它在只触及字段时对模糊有效,但我想要一个纯反应式解决方案,Pascal需要添加到HTML中。 问题示例:单击进入firstName字段,立即单击tab或单击out-内置必需的验证器激发。单击进入confirmPass

  • 我是angular 5的新用户,在这里我试图根据一些条件来验证用户密码。 < li >最少六个字符,至少一个字母和一个数字 < li >最少八个字符,至少一个字母、一个数字和一个特殊字符 < li >最少八个字符,至少一个大写字母、一个小写字母和一个数字 用户可以为密码字段选择上述模式之一,验证错误消息将相应地更改。 对我来说,上述条件都不能正常工作。 有人能帮我解答一下吗? 注意:如果我直接用超

  • 我正在尝试学习自定义验证。下面是简单的代码: 当我试图通过rails控制台插入数据时, 2.3.0 :014 它让我插入数据。我应该做些什么来使我的自定义验证方法起作用?

  • 我正在尝试将自定义密码验证添加到密码字段。密码必须至少包含 8 个字符,并且至少满足以下两个条件,但不必满足所有四个条件: 具有数字 具有小写字母 具有大写字母 具有特殊字符 我已经完成了部分验证工作,但遇到了一个问题,如果密码长度为8个字符,但不满足以上至少两个条件,错误消息将不会显示。只有当密码少于8个字符时,才会显示有关字符的错误。 我在SO中进行了搜索,但没有成功实现类似问题的答案。我怀疑

  • 我对自定义约束验证器中的bean自动连接有一个问题。约束验证器实例不是使用Spring的LocalValidatorFactoryBean提供的。JSR-303提供程序是hibernate validator 4.2.0。最终的 Spring配置摘录: 自定义约束验证器: 注释: 一些服务: SomeServiceImpl: SomeTypeService是另一个不依赖于SomeService的@

  • 问题内容: 我决定编写一个自定义指令来帮助我验证输入框。这个想法是,我将新的fancy 指令添加到引导程序中,它将检查my is 或is 并根据需要应用or 类。 出于某种奇怪的原因,我的指令在正常情况下可以正常工作,但是在ui-bootstrap模态内部完全忽略了添加的指令。 模态和形式相同的代码 我可爱的指令 在插件上查看:http ://plnkr.co/edit/AjvNi5e6hmXcT