Angular Forms Course

Author: jhades

src/app/address-form/address-form.component.ts

@@ -27,7 +27,7 @@ import {noop, Subscription} from 'rxjs';
     },
   ]
 })
-export class AddressFormComponent implements ControlValueAccessor, OnDestroy, Validator {
+export class AddressFormComponent implements ControlValueAccessor, OnDestroy, OnInit, Validator {
 
   @Input()
   legend:string;
@@ -47,6 +47,12 @@ export class AddressFormComponent implements ControlValueAccessor, OnDestroy, Va
   constructor(private fb: FormBuilder) {
   }
 
+  ngOnInit() {
+
+    this.form.valueChanges.subscribe(val => this.onValidationChange());
+
+  }
+
 
   ngOnDestroy() {
     for (let sub of this.onChangeSubs) {

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

@@ -31,7 +31,7 @@
 
   </mat-form-field>
 
-  <file-upload requiredFileType="image/png"></file-upload>
+  <file-upload requiredFileType="image/png" formControlName="thumbnailFile"></file-upload>
 
   <!--div class="form-val">
 

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

@@ -1,6 +1,6 @@
 
 
-<input type="file" class="file-input" (change)="onFileSelected($event)" [accept]="requiredFileType" #fileUpload>
+<input type="file" class="file-input" (change)="onFileSelected($event)" [accept]="requiredFileType" [disabled]="disabled" #fileUpload>
 
 
 <div class="file-upload">
@@ -11,7 +11,7 @@
 
   </mat-form-field>
 
-  <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
+  <button mat-mini-fab color="primary" class="upload-btn" (click)="onClick(fileUpload)" [disabled]="disabled">
     <mat-icon>
       attach_file
     </mat-icon>

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

@@ -1,14 +1,28 @@
 import {Component, Input} from '@angular/core';
 import {HttpClient, HttpEventType} from '@angular/common/http';
-import {finalize} from 'rxjs/operators';
+import {catchError, finalize} from 'rxjs/operators';
+import {AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator} from '@angular/forms';
+import {noop, of} from 'rxjs';
 
 
 @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
+    },
+    {
+      provide: NG_VALIDATORS,
+      multi: true,
+      useExisting: FileUploadComponent
+    },
+  ]
 })
-export class FileUploadComponent {
+export class FileUploadComponent implements ControlValueAccessor, Validator {
 
   @Input()
   requiredFileType:string;
@@ -17,12 +31,25 @@ export class FileUploadComponent {
 
   uploadProgress:number;
 
+  fileUploadError = false;
   validFileUploaded = false;
 
+  disabled = false;
+
+  onTouched = () => {};
+
+  onChange = (val) => {};
+
+  onValidationChange = () => {};
+
   constructor(private http: HttpClient) {
 
   }
 
+  onClick(fileUpload: HTMLInputElement) {
+    this.onTouched();
+    fileUpload.click();
+  }
 
   onFileSelected(event) {
 
@@ -39,21 +66,68 @@ export class FileUploadComponent {
       observe: 'events'
     })
     .pipe(
+      catchError(error => {
+        this.fileUploadError = true;
+        return of(error);
+      }),
       finalize(() => {
         this.uploadProgress = null;
-        this.validFileUploaded = true;
       })
     )
     .subscribe(event => {
 
-      if ( event.type === HttpEventType.UploadProgress ) {
-        this.uploadProgress  = Math.round((100 * event.loaded) / event.total);
+      if (event.type === HttpEventType.UploadProgress) {
+        this.uploadProgress = Math.round((100 * event.loaded) / event.total);
+      }
+      else if (event.type == HttpEventType.Response) {
+        console.log('file uploaded');
+        this.validFileUploaded = true;
+        this.onChange(file.name);
+        this.onValidationChange();
       }
 
     });
 
   }
 
+  registerOnChange(onChange: any) {
+   this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouched: any) {
+    this.onTouched = onTouched;
+  }
 
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
 
+  writeValue(obj: any) {
+    // not applicable to a file upload control
+  }
+
+  registerOnValidatorChange(fn: () => void) {
+    this.onValidationChange = fn;
+  }
+
+  validate(control: AbstractControl) {
+
+    if (this.validFileUploaded) {
+      console.log("Valid file uploaded");
+      return null;
+    }
+
+    let errors : any = {
+      requiredFileType: this.requiredFileType
+    };
+
+
+    if (this.fileUploadError) {
+      errors.uploadFailed = true;
+    }
+
+    console.log("validation errors", errors);
+
+    return errors;
+  }
 }