Ngx-file-required NPM

ngx-file-required

Table of Contents generated with DocToc

Description

Angular validation directive for setting and checking <input type="file" /> value to be required.

Works both with one & multiple files mode.

Demo

Installation

npm install ngx-file-required --save

or via yarn

yarn add ngx-file-required -S (shortcut)

Usage

Import the module

    import { NgModule } from '@angular/core';
    import { NgxFileRequiredModule } from 'ngx-file-required';

    @NgModule({
      // other settings
      imports: [
        // other imports
        NgxFileRequiredModule,
      ]
    })

Then use the directive

For dynamic attributes explanation see this stackoverflow example.

    <!-- 
        1. Make it required by default.
        2. The error message is a default one: 'File is required' 
    -->
    <input
      type="file"
      [(ngModel)]="myFile"
      required="required"
    />
    
    <!-- 
        1. Make it required dynamically.
        2. The error message is a default one: 'File is reqiured'
    -->
    <input
      type="file"
      [(ngModel)]="myFile"
      [attr.required]="{{condition}}"
    />
    
    <!-- 
        1. Make it required by default.
        2. The error message is customized to 'There should be a file' 
    -->
    <input 
      type="file" 
      [(ngModel)]="myFile"
      required="required"
      [requiredErrorMsg]="'There should be a file'" 
    />

    <!--
        1. Make it required by default.
        2. The error message is customized dynamically
    -->
    <input
      type="file"
      required="required"
      [requiredErrorMsg]="customErrorMessage"
    />