fix(input): disable not working when working with formcontrol

hypertrace · Nov 10, 2023 · 3479f4d · 3479f4d
1 parent 1dc53b9
commit 3479f4d
Showing 1 changed file with 11 additions and 7 deletions.
diff --git 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<T extends string | number> 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<T extends string | number> 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<T extends string | number> implements ControlValueAc
 
   public placeholderValue: string = '';
 
+  protected isDisabled: boolean = false;
+
   public constructor(private readonly cdr: ChangeDetectorRef) {}
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
@@ -93,12 +97,11 @@ export class InputComponent<T extends string | number> 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<T extends string | number> implements ControlValueAc
   }
 
   public setDisabledState(isDisabled?: boolean): void {
-    this.disabled = isDisabled ?? false;
+    this.isDisabled = isDisabled ?? false;
+    this.cdr.markForCheck();
   }
 
   private coerceValueIfNeeded(value?: string): T | undefined {