Angular 2 : Custom validation for file extensions

标签 angular angular2-forms angular2-directives

我是 Angular 的新手。我想创建一个自定义验证来检查文件大小和扩展名。我使用 FormBuilder 进行验证,使用 FileReader API 获取输入元素字段数据的文件名和大小。

问题:我们能够触发更改事件的自定义验证,但无法获取输入类型字段的值。

请建议我们如何在 Angular 2 中实现文件扩展名和大小的自定义验证。

HTML:

<input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)">

组件:

//custom validation
function validateExt(c: FormControl) {
    let extension = ['png', 'jpeg', 'gif'];
    return extension.indexOf(c.value)? null : { validateExt: { valid: false } }
}

this.form = this.formBuilder.group({
  'thumbnailImg': ['', validateExt],
});
changeThumbFile($event){
    var file: File = $event.target.files[0];
    var fReader: FileReader = new FileReader();

    var imgName = file.name;
    this.thumbnailName = imgName;

    this.formGp.controls['thumbnailImg'].updateValueAndValidity();
}

最佳答案

我有一个解决方案,也许不是完美的解决方案,但它确实有效(同样适用于文件大小),这里是:

首先在 html 文件上我得到文件上传的表单,每次上传文件时我都会在上面调用一个名为 fileEvent() 的特定函数,布局文件包含:

   <form [formGroup]="photoForm" (submit)="savePhoto()">
          <table>
            <tr>
              <td>Photo</td>
              <td>
                <div class="file-edit">
                  <input type="file" (change)="fileEvent($event)" formControlName="newPhoto" class="form-control" required #newPhoto>
                </div>
              </td>
              <td><p class="warning">{{fileExtensionMessage}}</p></td>
            </tr>
            <br/>
            <tr>
              <td></td>
              <td><button type="submit" [disabled]='fileExtensionError' class="submit-btn">Save</button></td>
            </tr>
          </table>
        </form>

请注意,如果 fileExtensionError 变量为真,提交按钮将被禁用。

检查验证的函数 fileEvent() 还给我文件名、文件扩展名和文件内容,如下所示:

 fileEvent(event) : any {
    //*-- this function gets content of uploaded file and validation --
     */
    var file = event.target.files[0];
    this.photoName = file.name;

    var allowedExtensions = 
       ["jpg","jpeg","png","JPG","JPEG","JFIF","BMP","SVG"];
    this.fileExtension = this.photoName.split('.').pop();

    if(this.isInArray(allowedExtensions, this.fileExtension)) {
        this.fileExtensionError = false;
        this.fileExtensionMessage = ""
    } else {
        this.fileExtensionMessage = "Only photos allowed!!"
        this.fileExtensionError = true;
    }

    if (file) {
        var reader = new FileReader();
        reader.onloadend = (e: any) => {
            var contents = e.target.result;
            this.photoContent = contents;
        }
        reader.readAsDataURL(file);
    } else {
        alert("Failed to load file");
    }
}

/*- checks if word exists in array -*/
 isInArray(array, word) {
    return array.indexOf(word.toLowerCase()) > -1;
}

当然,我在我的类中声明了这些变量:

photoName: any;
photoContent : any;
fileExtension: any;
fileExtensionError: boolean = false;
fileExtensionMessage: any;
photoForm : FormGroup;

希望对大家有帮助:D

关于 Angular 2 : Custom validation for file extensions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42800867/

相关文章:

angular - 通过查询组件的模板获取 FormControl 实例

javascript - 如何在 Angular2 的 DELETE 请求中传递参数

angular - 如何从 Service 获取 component.ts 中的可见数据(可观察模式)

javascript - 使用 div [ngStyle] 作为背景图像并循环它 *ngFor,如果缺少任何图像,如何使用 Angular 4 在其上显示静态图像

javascript - 在浏览器控制台中获取调度的 NGRX 项目

javascript - 如何在 Angular 8 中为 ngSubmit() 获取选定的下拉值?

javascript - 使用 Angular 应用程序的网页测试脚本

angular2 在子组件中更改@input 值然后在父组件中更改此值不起作用

angular - 清除按钮未重置 Angular 6 下拉列表中的选定值

angular - 如何在angular 2 ag-grid中的两行ag-grid之间添加空间