Angular Forms In Depth

Author: Your Name

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

@@ -11,7 +11,7 @@
     </mat-form-field>
 
     <button mat-mini-fab color="primary" class="upload-btn"
-      (click)="fileUpload.click()">
+      (click)="onClick(fileUpload)" [disabled]="disabled">
         <mat-icon>attach_file</mat-icon>
 
     </button>

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

@@ -21,10 +21,21 @@ export class FileUploadComponent implements ControlValueAccessor {
 
     uploadProgress:number;
 
+    onChange = (fileName:string) => {};
+
+    onTouched = () => {};
+
+    disabled : boolean = false;
+
     constructor(private http: HttpClient) {
 
     }
 
+    onClick(fileUpload: HTMLInputElement) {
+        this.onTouched();
+        fileUpload.click();
+    }
+
     onFileSelected(event) {
 
         const file:File = event.target.files[0];
@@ -56,6 +67,10 @@ export class FileUploadComponent implements ControlValueAccessor {
                 if (event.type == HttpEventType.UploadProgress) {
                     this.uploadProgress = Math.round(100 * (event.loaded / event.total));
                 }
+                else if (event.type == HttpEventType.Response) {
+                    this.onChange(this.fileName);
+
+                }
             });
 
 
@@ -64,6 +79,23 @@ export class FileUploadComponent implements ControlValueAccessor {
 
     }
 
+    writeValue(value: any) {
+        this.fileName = value;
+    }
+
+    registerOnChange(onChange: any) {
+        this.onChange = onChange;
+    }
+
+    registerOnTouched(onTouched: any) {
+        this.onTouched = onTouched;
+    }
+
+    setDisabledState(disabled: boolean) {
+        this.disabled = disabled;
+    }
+
+
 }