title: Angular 8: File validation error messages appear before uploading file
body: <p>I have a reactive form in Angular 8 to upload a file. I have used a custom validator and also built in validator. The issue is that, when I click on the upload button before the file is selected for upload/uploaded both the validation error messages appear. I also, tried using updateOn: blur option but still the validation error messages appear before I have the chance to upload file. How to fix the issue.</p>
  
  <pre><code>&lt;form [formGroup]="uploadForm" (ngSubmit)="onSubmit()"&gt;
      &lt;div&gt;
          &lt;label for="fileInput" class="mandatory"&gt;Upload File&lt;/label&gt;
          &lt;input type="file" id="fileInput" required formControlName="fileInput" name="fileInput" (change)="onFileUpload($event)"&gt;
          &lt;div class="input-error-alert" *ngIf="fileInput.invalid  &amp;&amp; (fileInput.dirty || fileInput.touched)"&gt;
              &lt;div *ngIf="fileInput.errors.required"&gt;Please upload file.&lt;/div&gt;
              &lt;div *ngIf="fileInput.errors.invalidFile"&gt;Please upload Excel file.&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary" [disabled]="!uploadForm.valid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  component
  swaggerForm = this.formBuilder.group({
      swaggerFile: ['', [Validators.required, fileTypeValidator()]]
  });
  
  Also tried, 
  
  swaggerForm = this.formBuilder.group({
      swaggerFile: ['', {validators: [Validators.required, fileTypeValidator()], updateOn: 'blur'}]
  });
  
  
  file-validation.directive.ts
  export function fileTypeValidator(): ValidatorFn {
      return (control: AbstractControl): {[key: string]: any} | null =&gt; {
          let fileName = control.value;
          let ext = fileName.substring(fileName.lastIndexOf('.') + 1);
          return (ext === 'xls' || ext === 'xlsx') ? null : {'invalidFile': true};
      };
  }
  </code></pre>