Inject a DOM event into a personalized form validator within an Angular application

Question

Inject a DOM event into a personalized form validator within an Angular application

I'm currently working on validating a form using the reactive approach. I've implemented a file input to allow users to upload files, with custom validation conditions in place. However, I'm encountering an issue where the validator only receives the file path (e.g., C:\fakepath\abc.xlsx) instead of the full event object. I need access to all file properties like type and size within the validator function.

Here's the relevant code snippet:

file.validator.ts

import { AbstractControl } from '@angular/forms';

export function ValidateFile(control: AbstractControl) : 
{ [key: string]: boolean } | null {
    const value = control.value;

    if (!value) {
        return null;
    }

    return value.length < 0 && value.files[0].type !== '.xlsx' && value.files[0].size > 5000000
    ? { invalidFile: true } : null;

}

sheet.component.ts

constructor(
private formBuilder: FormBuilder,
private alertService: AlertService
) {
    this.sheetForm = this.formBuilder.group({
    sheetType: ['Select Sheet Type', [Validators.required]],
    sheetUpload: [null, [Validators.required, ValidateFile]],
    sheetDescription: [
      null,
      [
        Validators.required,
        Validators.minLength(10),
        Validators.maxLength(100),
      ],
    ],
  });
}

sheet.component.html

<div class="input-group">
    <label for="sheet-upload">Upload Sheet: </label> &nbsp; &nbsp;
    <input
      id="sheet-upload"
      type="file"
      (change)="handleFileInput($event)"
      formControlName="sheetUpload"
      accept=".xlsx"
    />
    <small
      id="custom-error-message"
      *ngIf="
        (sheetForm.get('sheetUpload').dirty ||
          sheetForm.get('sheetUpload').touched) &&
        sheetForm.get('sheetUpload').invalid
      "
    >
      The file size exceeds 5 MB or isn't a valid excel type. Please
      upload again.
    </small>
</div>

Any advice or guidance would be highly appreciated. Thank you!

javascript angular typescript

Answer 1

Answer №1

There may be other methods, but this one gets the job done

Implement a directive to connect the native element to the form control
Retrieve the file from the native element within the validator function during validation
To utilize formControlName, ensure that a formGroup is assigned to the parent element (unless it's already included in another parent element)

@Directive({
  selector: '[formControlName]',
})
export class NativeElementInjectorDirective implements OnInit {
  constructor(private el: ElementRef, private control: NgControl) {}

  ngOnInit() {
    (this.control.control as any).nativeElement = this.el.nativeElement;
  }
}

file.validator.ts

export function ValidateFile(control: any): { [key: string]: boolean } | null {
  const value = control.value;
  const file = control?.nativeElement?.files[0];

  if (!value) {
    return null;
  }

  return value.length < 0 || file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.size > 5000000
    ? { invalidFile: true }
    : null;
}

sheet.component.html

<div class="input-group" [formGroup]="sheetForm">
  <label for="sheet-upload">Upload Sheet: </label> &nbsp; &nbsp;
  <input
    id="sheet-upload"
    type="file"
    formControlName="sheetUpload"
    accept=".xlsx"
  />
  <small
    id="custom-error-message"
    *ngIf="
      (sheetForm.get('sheetUpload').dirty ||
        sheetForm.get('sheetUpload').touched) &&
      sheetForm.get('sheetUpload').invalid
    "
  >
    The file size exceeds 5 MB or isn't a valid excel type. Please upload again.
  </small>
</div>

Answer 2

There may be other methods, but this one gets the job done

Implement a directive to connect the native element to the form control
Retrieve the file from the native element within the validator function during validation
To utilize formControlName, ensure that a formGroup is assigned to the parent element (unless it's already included in another parent element)

@Directive({
  selector: '[formControlName]',
})
export class NativeElementInjectorDirective implements OnInit {
  constructor(private el: ElementRef, private control: NgControl) {}

  ngOnInit() {
    (this.control.control as any).nativeElement = this.el.nativeElement;
  }
}

file.validator.ts

export function ValidateFile(control: any): { [key: string]: boolean } | null {
  const value = control.value;
  const file = control?.nativeElement?.files[0];

  if (!value) {
    return null;
  }

  return value.length < 0 || file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.size > 5000000
    ? { invalidFile: true }
    : null;
}

sheet.component.html

<div class="input-group" [formGroup]="sheetForm">
  <label for="sheet-upload">Upload Sheet: </label> &nbsp; &nbsp;
  <input
    id="sheet-upload"
    type="file"
    formControlName="sheetUpload"
    accept=".xlsx"
  />
  <small
    id="custom-error-message"
    *ngIf="
      (sheetForm.get('sheetUpload').dirty ||
        sheetForm.get('sheetUpload').touched) &&
      sheetForm.get('sheetUpload').invalid
    "
  >
    The file size exceeds 5 MB or isn't a valid excel type. Please upload again.
  </small>
</div>

Answer 3

Answer №2

If you want to validate an input element, make sure to reference it and utilize it in the validator function.

<input #sheetUpload ...>

@ViewChild('sheetUpload') fileInput: HTMLInputElement;

private ValidateFile(): ValidatorFn {
return (control) => {
  const value = control.value;

  if (!value || !this.fileInput) {
    return null;
  }

  const file = this.fileInput.files[0];

  return value.length < 0 && file.type !== '.xlsx' && file.size > 5000000
    ? { invalidFile: file.name }
    : null;
  }
}

Answer 4

If you want to validate an input element, make sure to reference it and utilize it in the validator function.

<input #sheetUpload ...>

@ViewChild('sheetUpload') fileInput: HTMLInputElement;

private ValidateFile(): ValidatorFn {
return (control) => {
  const value = control.value;

  if (!value || !this.fileInput) {
    return null;
  }

  const file = this.fileInput.files[0];

  return value.length < 0 && file.type !== '.xlsx' && file.size > 5000000
    ? { invalidFile: file.name }
    : null;
  }
}

Inject a DOM event into a personalized form validator within an Angular application

Answer №1

Answer №2

Similar questions

What could be the reason for not receiving any response from my Firestore query?

NodeJS: The module failed to automatically register itself

The FileReader's onload event handler does not seem to be triggering as expected

I'm seeking clarity on the proper replacement for ngModel within this Angular code, as I've been cautioned about using form control name and ngModel simultaneously

Techniques for sending PHP variables to window.location using JavaScript

Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

Deactivate user input in Knockout Kendo TimePicker

What's causing jQuery to make the entire page malfunction?

Show a caution message when there has been no activity on the page for 3 minutes

Updating a document on Firestore based on a query is a straightforward process that involves first identifying

Exploring URL Parameters in Angular Unit Testing

difficulty receiving the information promptly via an AJAX request (utilizing AJAX and the 'for' loop)

How can TypeScript leverage the power of JavaScript libraries?

What is the best approach for adding variable rows to a Postgres junction table: should you concatenate a query string, utilize multiple queries, or explore alternative methods

How to Use Attributes as Component Parameters in Vue.js

Choosing the initial object in Angular2 using ngValue

Struggling to form an array of arrays: encountering an issue with data.map not being a function

What steps can you take to stop a tab from being inserted if one is already present?

Utilizing const as the iteration variable in a for loop

Display JSON on the screen so it can be easily copied and pasted