title: Multiple file upload using custom directive in Angular
body: <p>I am trying to create a custom directive to validate multiple file upload.But in custom Directive, control is just returning the last file's details instead of array.</p>
  
  <p>Below is the code :</p>
  
  <p>File-upload.html :</p>
  
  <pre><code>&lt;form [formGroup]="validateDocumentForm"&gt;
  &lt;input formControlName="document"  style="display: none" type="file" multiple (change)="onFileChanged($event)" #fileInput accept="application/pdf"  class="form-control"&gt;
  &lt;button class="btn upload-doc-btn" (click)="fileInput.click()"&gt;&lt;span&gt;&lt;i class="material-icons"&gt;vertical_align_top&lt;/i&gt; Upload File&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>file-upload.ts</p>
  
  <pre><code>ngOnInit() {
  this.validateDocumentForm = this.formBuilder.group({
    document: this.formBuilder.array(['', [
      CustomValidator.uploadDocument
    ]]),
  });
  </code></pre>
  
  <p>}</p>
  
  <p>Custom-validator.ts:</p>
  
  <pre><code>export class CustomValidator {
      static uploadDocument(control: AbstractControl): 
      ValidationErrors | null {
        console.log(control); // only last file's details instead of 
                                 array of selected files.
        console.log(control.value);
        return  null;
     }
  }
  </code></pre>