From 3479f4dbdb6cd040ed5faf82c7c44744971d90cd Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Fri, 10 Nov 2023 11:55:34 +0530 Subject: [PATCH] fix(input): disable not working when working with formcontrol --- .../components/src/input/input.component.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/projects/components/src/input/input.component.ts b/projects/components/src/input/input.component.ts index ff0380865..3095672de 100644 --- a/projects/components/src/input/input.component.ts +++ b/projects/components/src/input/input.component.ts @@ -30,7 +30,7 @@ import { InputAppearance } from './input-appearance'; [min]="this.min" [max]="this.max" [required]="this.required" - [disabled]="this.disabled" + [disabled]="this.isDisabled" [placeholder]="this.placeholderValue" [attr.aria-label]="this.ariaLabel || 'input'" [ngModel]="this.value" @@ -47,7 +47,7 @@ export class InputComponent implements ControlValueAc public value?: T; @Input() - public type?: string; + public type: string = 'text'; @Input() public appearance: InputAppearance = InputAppearance.Underline; @@ -56,7 +56,9 @@ export class InputComponent implements ControlValueAc public required: boolean = false; @Input() - public disabled: boolean = false; + public set disabled(disabled: boolean) { + this.isDisabled = disabled; + } @Input() public min?: number | undefined; @@ -74,6 +76,8 @@ export class InputComponent implements ControlValueAc public placeholderValue: string = ''; + protected isDisabled: boolean = false; + public constructor(private readonly cdr: ChangeDetectorRef) {} public ngOnChanges(changes: TypedSimpleChanges): void { @@ -93,12 +97,11 @@ export class InputComponent implements ControlValueAc } public getStyleClasses(): string[] { - return [this.appearance, this.disabled ? 'disabled' : '']; + return [this.appearance, this.isDisabled ? 'disabled' : '']; } public writeValue(value?: string): void { - const coercedValue = this.coerceValueIfNeeded(value); - this.value = coercedValue; + this.value = this.coerceValueIfNeeded(value); this.cdr.markForCheck(); } @@ -111,7 +114,8 @@ export class InputComponent implements ControlValueAc } public setDisabledState(isDisabled?: boolean): void { - this.disabled = isDisabled ?? false; + this.isDisabled = isDisabled ?? false; + this.cdr.markForCheck(); } private coerceValueIfNeeded(value?: string): T | undefined {