controlvalueaccessor

Author: Your Name

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

@@ -41,6 +41,12 @@
 
 </div>
 
+<div class="form-val">
+
+    Form validity state: {{form.valid }}
+
+</div>
+
 <div class="form-val">
 
     {{form.value | json}}

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

@@ -2,7 +2,7 @@ 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, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator} from '@angular/forms';
 
 
 @Component({
@@ -14,10 +14,15 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
           provide: NG_VALUE_ACCESSOR,
           multi: true,
           useExisting: FileUploadComponent
+      },
+      {
+          provide: NG_VALIDATORS,
+          multi: true,
+          useExisting: FileUploadComponent
       }
   ]
 })
-export class FileUploadComponent implements ControlValueAccessor {
+export class FileUploadComponent implements ControlValueAccessor, Validator {
 
     @Input()
     requiredFileType:string;
@@ -26,12 +31,16 @@ export class FileUploadComponent implements ControlValueAccessor {
 
     fileUploadError = false;
 
+    fileUploadSuccess = false;
+
     uploadProgress:number;
 
     onChange = (fileName:string) => {};
 
     onTouched = () => {};
 
+    onValidatorChange = () => {};
+
     disabled : boolean = false;
 
     constructor(private http: HttpClient) {
@@ -75,8 +84,9 @@ export class FileUploadComponent implements ControlValueAccessor {
                     this.uploadProgress = Math.round(100 * (event.loaded / event.total));
                 }
                 else if (event.type == HttpEventType.Response) {
+                    this.fileUploadSuccess = true;
                     this.onChange(this.fileName);
-
+                    this.onValidatorChange();
                 }
             });
 
@@ -102,6 +112,29 @@ export class FileUploadComponent implements ControlValueAccessor {
         this.disabled = disabled;
     }
 
+    registerOnValidatorChange(onValidatorChange: () => void) {
+        this.onValidatorChange = onValidatorChange;
+    }
+
+    validate(control: AbstractControl): ValidationErrors | null {
+
+        if (this.fileUploadSuccess) {
+            return null;
+        }
+
+        let errors: any = {
+            requiredFileType: this.requiredFileType
+        };
+
+        if (this.fileUploadError) {
+            errors.uploadFailed = true;
+        }
+
+        return errors;
+    }
+
+
+
 
 }