fix: Avoid null pointers by not using nativeElement (#2323)

Signed-off-by: anemonetea <[email protected]>
Co-authored-by: Akshat Patel <[email protected]>

Author: anemonetea

src/checkbox/checkbox.component.ts

@@ -314,7 +314,7 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 */
 	setDisabledState(isDisabled: boolean) {
 		this.disabled = isDisabled;
-		this.inputCheckbox.nativeElement.disabled = this.disabled;
+		this.changeDetectorRef.markForCheck();
 	}
 
 	@HostListener("focusout")

src/checkbox/checkbox.stories.ts

@@ -16,6 +16,9 @@ import { DocumentationModule } from "../documentation-component/documentation.mo
 	selector: "app-reactive-forms",
 	template: `
 		<form [formGroup]="formGroup">
+			<ibm-checkbox formControlName="disabledCheckbox">
+				Disabled checkbox in a reactive form
+			</ibm-checkbox>
 			<ibm-checkbox formControlName="checkbox">
 				Checkbox in a reactive form
 			</ibm-checkbox>
@@ -26,19 +29,21 @@ import { DocumentationModule } from "../documentation-component/documentation.mo
 })
 class ReactiveFormsStory implements OnInit {
 	public formGroup: FormGroup;
-	disabled = false;
 
 	constructor(protected formBuilder: FormBuilder) { }
 
 	ngOnInit() {
 		this.formGroup = this.formBuilder.group({
-			checkbox: new FormControl()
+			disabledCheckbox: this.formBuilder.control({value: true, disabled: true}),
+			checkbox: this.formBuilder.control(false)
 		});
 	}
 
 	toggleDisable() {
 		const checkbox = this.formGroup.get("checkbox");
-		checkbox.disabled ? checkbox.enable() : checkbox.disable();
+		if (checkbox != null) {
+			checkbox.disabled ? checkbox.enable() : checkbox.disable();
+		}
 	}
 }