Angular2: validation for won’t trigger when changing the file to upload

by

I fixed it using kemsky answer and Sebastien’s comment.
I made a ngValueAccessor which registers itself on every input with type file.

Plunkr can be found here.

Most relevant code + explanation beneath:

This adds a ControlValueAccessor for file inputs which might be part of the angular framework itself someday(#7341).
A file input works different than other controls. This piece of code makes sure the selected files are read as the value:

import {Directive} from "@angular/core";
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from "@angular/forms";

@Directive({
    selector: "input[type=file]",
    host : {
        "(change)" : "onChange($event.target.files)",
        "(blur)": "onTouched()"
    },
    providers: [
        { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessor, multi: true }
    ]
})
export class FileValueAccessor implements ControlValueAccessor {
    value: any;
    onChange = (_) => {};
    onTouched = () => {};

    writeValue(value) {}
    registerOnChange(fn: any) { this.onChange = fn; }
    registerOnTouched(fn: any) { this.onTouched = fn; }
}

And for the ‘required’ validation I made a validator which I use by adding the static validate method to the file FormControl for ReactiveForms. (or as a directive for template driven forms).

import {Directive} from "@angular/core";
import {NG_VALIDATORS, Validator, FormControl} from "@angular/forms";

@Directive({
    selector: "[requiredFile]",
    providers: [
        { provide: NG_VALIDATORS, useExisting: FileValidator, multi: true },
    ]
})
export class FileValidator implements Validator {
    static validate(c: FormControl): {[key: string]: any} {
        return c.value == null || c.value.length == 0 ? { "required" : true} : null;
    }

    validate(c: FormControl): {[key: string]: any} {
        return FileValidator.validate(c);
    }
}

Building my form looks like this:

private buildForm() {
    this.frm = new FormGroup({
        file: new FormControl("",    [FileValidator.validate])
    });
}

And for the html:

<input type="file" formControlName="file"/>

More Related Contents:

  1. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  2. Angular2 nested template driven form
  3. Angular how to get the multiple checkbox values?
  4. password and confirm password field validation angular2 reactive forms
  5. angular2 manually firing click event on particular element
  6. Apply a directive conditionally
  7. When to use FormGroup vs. FormArray?
  8. two way binding with safe navigation operator
  9. What are the practical differences between template-driven and reactive forms?
  10. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  11. Angular 2 Form “Cannot find control with path”
  12. Angular2 – Validate and submit form from outside
  13. Angular 2 – formControlName inside component
  14. Resetting a form in Angular 2 after submit
  15. Generic email validator
  16. formGroup expects a FormGroup instance
  17. Is it possible to get native element for formControl?
  18. ng-content select bound variable
  19. The pipe ‘ ‘ could not be found angular2 custom pipe
  20. What is the difference between formControlName and FormControl?
  21. How to reset form validation on submission of the form in ANGULAR 2
  22. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  23. ngModel cannot be used to register form controls with a parent formGroup directive
  24. How to clear form after submit in Angular 2?
  25. Angular 2 Reactive Forms trigger validation on submit
  26. Angular 2 creating reactive forms with nested components
  27. Angular 2 FormGroup Add Validators dynamic
  28. Forms In angular2
  29. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  30. Angular 2 router resolve with Observable

Leave a Comment