Angular Forms In Depth

angular-university · Jan 15, 2021 · a3ec5de · a3ec5de
1 parent 2617c0d
commit a3ec5de
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/app/create-course/create-course-step-2/create-course-step-2.component.html b/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>
 

diff --git a/src/app/create-course/create-course-step-2/create-course-step-2.component.ts b/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]
     }, {

diff --git a/src/app/file-upload/file-upload.component.ts b/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 {