title: PatchValue for Upload file in angular
body: <p>So i have edit form page like this
  <a href="https://i.stack.imgur.com/8SA0i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8SA0i.png" alt="enter image description here" /></a></p>
  <p>and form a group like this</p>
  <pre><code>this.editMateri = this.fb.group({
    name: [''],
    description: [''],
    thumbnail: [null],
    isPublish: this.status,
    materialCreatorCode: [''],
    tags: this.selectedTags
  });
  </code></pre>
  <p>and i fetch the data from the server and set the value to the form using <code>patchValue</code> like this</p>
  <pre><code>this.editMateri.patchValue(this.currentMateri);
  </code></pre>
  <p>everything works fine, but the problem is with the thumbnail File Upload input, by default it's null so if i update anything except the thumbnail, my thumbnail will goes blank, the thumbnail is set to null. I've been looking for stackblitz code for this but i didn't find any, anyone can help me?</p>
  <p>EDIT</p>
  <p>in my html like this</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;exampleInputEmail1&quot; class=&quot;label&quot;&gt;Thumbnail&lt;/label&gt;
      &lt;input type=&quot;file&quot; nbInput fullWidth (change)=&quot;uploadFile($event)&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and for uploadFile function like this</p>
  <pre><code>  uploadFile(event) {
      const file = (event.target as HTMLInputElement).files[0];
      this.editMateri.patchValue({
        thumbnail: file
      });
      this.editMateri.get('thumbnail').updateValueAndValidity()
    }
  </code></pre>