Angular Forms In Depth

Author: Your Name

src/app/create-course/create-course-step-2/create-course-step-2.component.html

@@ -9,7 +9,8 @@
 
     </mat-radio-group>
 
-    <file-upload requiredFileType="image/png"></file-upload>
+    <file-upload formControlName="thumbnail"
+                 requiredFileType="image/png"></file-upload>
 
     <mat-form-field>
 

src/app/create-course/create-course-step-2/create-course-step-2.component.ts

@@ -18,6 +18,7 @@ export class CreateCourseStep2Component implements OnInit {
             Validators.max(9999),
             Validators.pattern("[0-9]+")
         ]],
+        thumbnail: [null],
         promoStartAt: [null],
         promoEndAt: [null]
     }, {

src/app/file-upload/file-upload.component.ts

@@ -2,13 +2,20 @@ import {Component, Input} from '@angular/core';
 import {HttpClient, HttpEventType} from '@angular/common/http';
 import {catchError, finalize} from 'rxjs/operators';
 import {of} from 'rxjs';
-import {ControlValueAccessor} from '@angular/forms';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 
 
 @Component({
   selector: 'file-upload',
   templateUrl: "file-upload.component.html",
-  styleUrls: ["file-upload.component.scss"]
+  styleUrls: ["file-upload.component.scss"],
+  providers: [
+      {
+          provide: NG_VALUE_ACCESSOR,
+          multi: true,
+          useExisting: FileUploadComponent
+      }
+  ]
 })
 export class FileUploadComponent implements ControlValueAccessor {