fix(FileUploader): fixed file uploader not being disable with reactive form disabled

Author: Licen-it

src/file-uploader/file-uploader.component.ts

@@ -6,7 +6,7 @@ import {
 	EventEmitter,
 	TemplateRef
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { I18n } from "carbon-components-angular/i18n";
 import { FileItem } from "./file-item.interface";
@@ -90,7 +90,7 @@ const noop = () => { };
 		}
 	]
 })
-export class FileUploader {
+export class FileUploader implements ControlValueAccessor {
 	/**
 	 * Counter used to create unique ids for file-uploader components
 	 */
@@ -287,4 +287,15 @@ export class FileUploader {
 	registerOnChange(fn: any) {
 		this.onChangeCallback = fn;
 	}
+
+	/**
+	 * `ControlValueAccessor` method to programmatically disable the checkbox.
+	 *
+	 * ex: `this.formGroup.get("myFileUploader").disable();`
+	 *
+	 * @param isDisabled `true` to disable the file uploader
+	 */
+	setDisabledState(isDisabled: boolean) {
+		this.disabled = isDisabled;
+	}
 }

src/file-uploader/file-uploader.stories.ts

@@ -295,11 +295,29 @@ class NgModelFileUploaderStory {
 				Upload
 			</button>
 		</form>
+		<form [formGroup]="disabledFormGroup" (ngSubmit)="onUpload()">
+			<ibm-file-uploader
+				[title]="title"
+				[description]="description"
+				[buttonText]="buttonText"
+				[buttonType]="buttonType"
+				[accept]="accept"
+				[multiple]="multiple"
+				[skeleton]="skeleton"
+				[size]="size"
+				formControlName="files">
+			</ibm-file-uploader>
+			<div [id]="notificationId" style="width: 300px; margin-top: 20px"></div>
+			<button ibmButton *ngIf="disabledFormGroup.get('files').value && disabledFormGroup.get('files').value.size > 0" type="submit">
+				Upload
+			</button>
+		</form>
 	`
 })
 class ReactiveFormsStory implements OnInit {
 	static notificationCount = 0;
 	public formGroup: FormGroup;
+	public disabledFormGroup: FormGroup;
 
 	@Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;
 	@Input() title;
@@ -325,6 +343,10 @@ class ReactiveFormsStory implements OnInit {
 		this.formGroup = this.formBuilder.group({
 			files: new FormControl(new Set<any>(), [Validators.required])
 		});
+		this.disabledFormGroup = this.formBuilder.group({
+			files: new FormControl(new Set<any>(), [Validators.required])
+		});
+		this.disabledFormGroup.disable()
 	}
 
 	onUpload() {