fix: ControlValueAccessors

Rikarin · Jun 10, 2024 · 8952509 · 8952509
1 parent a9df72c
commit 8952509
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 23 deletions.
diff --git a/apps/web/src/app/docs/components/example/example.ts b/apps/web/src/app/docs/components/example/example.ts
@@ -60,6 +60,10 @@ export class Example implements OnInit {
   async fetchFiles() {
     const files: File[] = [];
 
+    if (!this.files()) {
+      return [];
+    }
+
     // TODO: finish this
     for (const file of Object.keys(this.files()!)) {
       if (this.files()![file] === FileType.Component) {

diff --git a/libs/xui/src/checkbox/checkbox.ts b/libs/xui/src/checkbox/checkbox.ts
@@ -65,7 +65,7 @@ export class XuiCheckbox implements ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
   writeValue(source: boolean) {

diff --git a/libs/xui/src/input/input.html b/libs/xui/src/input/input.html
@@ -1,4 +1,4 @@
-<div [ngClass]="_styles()">
+<div [ngClass]="_styles()" [class.x-input-error]="_showError">
   <ng-content select="[xuiPrefix]" />
   <input
     [tabindex]="_disabled() ? -1 : 0"
@@ -12,7 +12,7 @@
   <ng-content select="[xuiPostfix]" />
 </div>
 
-<div class="x-input-error-text" *ngIf="showError">
+<div class="x-input-error-text" *ngIf="_showError">
   <ng-container *ngIf="control?.hasError('message')">{{ errorMessage }}</ng-container>
   <ng-container *ngIf="control?.hasError('required')">This field is required!</ng-container>
   <ng-container *ngIf="control?.hasError('email')">Email expected</ng-container>

diff --git a/libs/xui/src/input/input.ts b/libs/xui/src/input/input.ts
@@ -45,7 +45,7 @@ export class XuiInput implements ControlValueAccessor {
   _styles = computed(() => {
     const ret: { [klass: string]: boolean } = {
       'x-input': true,
-      'x-input-error': this.showError
+      'x-input-error': this._showError
     };
 
     ret[`x-input-${this.color()}`] = true;
@@ -69,20 +69,17 @@ export class XuiInput implements ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
-  get invalid(): boolean {
-    return !!this.control?.invalid;
-  }
-
-  get showError(): boolean {
+  get _showError(): boolean {
     if (!this.control) {
       return false;
     }
 
+    const invalid = !!this.control.invalid;
     const { dirty, touched } = this.control;
-    return this.invalid ? (dirty ?? false) || (touched ?? false) : false;
+    return invalid ? (dirty ?? false) || (touched ?? false) : false;
   }
 
   writeValue(source: string) {

diff --git a/libs/xui/src/radio-list/radio-list.ts b/libs/xui/src/radio-list/radio-list.ts
@@ -60,7 +60,7 @@ export class XuiRadioList implements RadioListAccessor, ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
   writeValue(source: RadioListValue) {

diff --git a/libs/xui/src/radio/radio-group.ts b/libs/xui/src/radio/radio-group.ts
@@ -45,7 +45,7 @@ export class XuiRadioGroup implements RadioGroupAccessor, ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
   writeValue(source: RadioValue) {

diff --git a/libs/xui/src/select/select.ts b/libs/xui/src/select/select.ts
@@ -66,7 +66,7 @@ export class XuiSelect implements SelectAccessor, ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
   open() {

diff --git a/libs/xui/src/textarea/textarea.html b/libs/xui/src/textarea/textarea.html
@@ -1,4 +1,4 @@
-<div [ngClass]="_styles()" [class.x-textarea-error]="showError">
+<div [ngClass]="_styles()" [class.x-textarea-error]="_showError">
   <textarea
     [disabled]="_disabled()"
     [readOnly]="readOnly()"
@@ -12,7 +12,7 @@
   <div *ngIf="maxLength()" class="x-textarea-word-counter">{{ _worldCount() }}</div>
 </div>
 
-<div class="x-textarea-error-text" *ngIf="showError">
+<div class="x-textarea-error-text" *ngIf="_showError">
   <ng-container *ngIf="control?.hasError('message')">{{ errorMessage }}</ng-container>
   <ng-container *ngIf="control?.hasError('required')">This field is required!</ng-container>
   <ng-container *ngIf="control?.hasError('email')">Email expected</ng-container>

diff --git a/libs/xui/src/textarea/textarea.ts b/libs/xui/src/textarea/textarea.ts
@@ -67,20 +67,17 @@ export class XuiTextarea implements ControlValueAccessor {
     }
 
     effect(() => this.disabled() && this._disabled.set(this.disabled()!), { allowSignalWrites: true });
-    effect(() => this.onChange?.(this.value()!));
+    effect(() => this.value() != undefined && this.onChange?.(this.value()!));
   }
 
-  get invalid(): boolean {
-    return !!this.control?.invalid;
-  }
-
-  get showError(): boolean {
+  get _showError(): boolean {
     if (!this.control) {
       return false;
     }
 
+    const invalid = !!this.control.invalid;
     const { dirty, touched } = this.control;
-    return this.invalid ? (dirty ?? false) || (touched ?? false) : false;
+    return invalid ? (dirty ?? false) || (touched ?? false) : false;
   }
 
   writeValue(source: string) {