title: Using reactive form validation with <input type="file"> for an Angular app
body: <p>I'm writing a component with a file picker that uploads a file to our CDN. I'm trying to add a reactive form on this component to validate the image input, so I can check against file name/extension etc, and keep it wrapped it in a form so I can keep the benefits of Angulars validation.</p>
  
  <p>My component HTML is</p>
  
  <pre><code>&lt;form class="mt-4" [formGroup]="form"&gt;
    &lt;div class="form-group form-inline"&gt;
      &lt;label class="btn btn-secondary btn-file"&gt;Browse
         &lt;input name="file" type="file" (change)="onChange($event)" formControlName="imageInput"
      &lt;/label&gt;
  
      &lt;p *ngIf="file" class="pl-4 align-middle mb-0"&gt;{{file.name}}&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;button type="button" class="btn btn-primary"&gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And my component code behind is</p>
  
  <pre><code>onChange(event: EventTarget) {
    // file picker code
  
    this.form = this.formBuilder.group({
        imageInput: [this.file.name, CustomValidators.imageValidator]
    });
  }
  </code></pre>
  
  <p>The <code>CustomValidars.imageValidator</code> only just logs the input at the minute.</p>
  
  <p>When the component is loaded, the error message displays as <code>ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.</code></p>
  
  <p>Basically, I want to use the file input in my reactive form, so I can validate against the filename. </p>