ng2-file-required

ng2-file-required

@DEPRACATED: the project is not maintainable anymore because of moving to the newest angular version. Use ngx-file-required instead.

Table of Contents generated with DocToc

• Description
• Installation
• Usage
• Demo
• Acknowledgments
• Development

Description

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

Works both with one & multiple files mode.

Installation

npm install ng2-file-required --save

npm i ng2-file-required -S (shortcut)

Usage

Attention

For the obsolete and limited [ng2FileRequired] usage see latest git v0.0.0-beta.* tag

For current stable version usage follow the next steps:

1. import the module to your one:

    import { Ng2FileRequiredModule } from 'ng2-file-required';

    @NgModule({
      ...
      imports: [
        ...
        Ng2FileRequiredModule
      ]
    })
    ...

1. 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"
    />

Demo

See it here.

Acknowledgments

I express my gratitude to the valor-software team. This project structure is based on their ng2-file-upload solution, their tslint configuration and npm submodules manager.

Development

1. Clone/fork it

2. In ./src directory you can find the directive sources & unit tests, in the ./demo one - the files for Github Pages demo.

3. Use next npm scripts for development (they use angular-cli and ngm-cli):

   3.1. npm start serves with ng serve command;

   3.2. npm build - created ./dist directory in the end;

   3.3 npm test - runs unit tests with ng test using Karma and Angular 2 testing tools.

   3.4 npm run e2e - runs e2e tests using Protractor and Selenium Webdriver.