🐛 fix(bal-ng-error): If control is hidden ny ngIf and evaluated durin…

…g that time to invalid, binded bal-ng-error doesn't show up (#1263) * Create PR for #1258 * fix(angular): error component lifecycle hack * chore: add changeset * fix(ng-error): detect changes for angular --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Jan 3, 2024 · e499004 · e499004
1 parent e56e249
commit e499004
Show file tree

Hide file tree

Showing 7 changed files with 279 additions and 252 deletions.
diff --git a/.changeset/brown-cherries-push.md b/.changeset/brown-cherries-push.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components-angular': patch
+---
+
+The Angular component `bal-ng-error` is now more synchronized with Angular lifecycles, ensuring improved visibility and hiding of validation messages.
diff --git a/apps/angular/base/v17-standalone/package-lock.json b/apps/angular/base/v17-standalone/package-lock.json
diff --git a/apps/angular/build.sh b/apps/angular/build.sh
@@ -22,7 +22,7 @@ cp -R $FULL_APP_DIR $BUILD_APP_DIR
 
 pushd $BUILD_APP_DIR
 npm run copy
-npm ci
+npm install
 npm run link
 popd
 

diff --git a/packages/components-angular/common/src/directives/error.component.ts b/packages/components-angular/common/src/directives/error.component.ts
@@ -1,13 +1,14 @@
-import { AfterViewInit, Directive, HostBinding, Inject, Injector, Input } from '@angular/core'
+import { AfterViewInit, ChangeDetectorRef, Directive, HostBinding, Inject, Injector, Input } from '@angular/core'
 import { AbstractControl, ControlContainer } from '@angular/forms'
+import { BehaviorSubject } from 'rxjs'
 
 import type { BaloiseDesignSystemAngularConfig } from '../utils/config'
 import { raf } from '../utils/utils'
 import { BalTokenConfig } from '../utils/token'
 
 // @Component({
 //   selector: 'bal-ng-error',
-//   template: `<ng-content *ngIf="hasError"></ng-content>`,
+//   template: `<ng-content *ngIf="(ready | async) && hasError"></ng-content>`,
 //   styles: [
 //     `
 //       :host {
@@ -33,12 +34,16 @@ export class BalNgErrorComponent implements AfterViewInit {
   @Input()
   controlName?: string
 
-  constructor(@Inject(Injector) protected injector: Injector) {}
+  constructor(
+    @Inject(Injector) protected injector: Injector,
+    @Inject(ChangeDetectorRef) protected cd: ChangeDetectorRef,
+  ) {}
 
   private controlContainer?: ControlContainer
   private control?: AbstractControl | null
   private config?: BaloiseDesignSystemAngularConfig
   private invalidateOn: 'dirty' | 'touched' = 'touched'
+  ready = new BehaviorSubject(false)
 
   ngAfterViewInit(): void {
     raf(() => {
@@ -64,6 +69,9 @@ export class BalNgErrorComponent implements AfterViewInit {
         this.control = this.controlContainer.control?.get(this.controlName)
         if (!this.control) {
           console.warn('[BalNgErrorComponent] Could not find the given controlName in the form control container')
+        } else {
+          this.ready.next(true)
+          this.cd.detectChanges()
         }
       } else {
         console.warn('[BalNgErrorComponent] Please provide a controlName')

diff --git a/packages/components-angular/legacy/src/directives/error.component.ts b/packages/components-angular/legacy/src/directives/error.component.ts
@@ -1,10 +1,10 @@
-import { Component, Injector, Inject } from '@angular/core'
+import { Component, Injector, Inject, ChangeDetectorRef } from '@angular/core'
 
 import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-system-components-angular/common'
 
 @Component({
   selector: 'bal-ng-error',
-  template: `<ng-content *ngIf="hasError"></ng-content>`,
+  template: `<ng-content *ngIf="(ready | async) && hasError"></ng-content>`,
   styles: [
     `
       :host {
@@ -14,7 +14,7 @@ import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-
   ],
 })
 export class BalNgErrorComponent extends BalNgErrorComponentBase {
-  constructor(@Inject(Injector) injector: Injector) {
-    super(injector)
+  constructor(@Inject(Injector) injector: Injector, @Inject(ChangeDetectorRef) cd: ChangeDetectorRef) {
+    super(injector, cd)
   }
 }
diff --git a/packages/components-angular/src/directives/error.component.ts b/packages/components-angular/src/directives/error.component.ts
@@ -1,10 +1,10 @@
-import { Component, Inject, Injector } from '@angular/core'
+import { ChangeDetectorRef, Component, Inject, Injector } from '@angular/core'
 
 import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-system-components-angular/common'
 
 @Component({
   selector: 'bal-ng-error',
-  template: `<ng-content *ngIf="hasError"></ng-content>`,
+  template: `<ng-content *ngIf="(ready | async) && hasError"></ng-content>`,
   styles: [
     `
       :host {
@@ -14,7 +14,7 @@ import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-
   ],
 })
 export class BalNgErrorComponent extends BalNgErrorComponentBase {
-  constructor(@Inject(Injector) injector: Injector) {
-    super(injector)
+  constructor(@Inject(Injector) injector: Injector, @Inject(ChangeDetectorRef) cd: ChangeDetectorRef) {
+    super(injector, cd)
   }
 }
diff --git a/packages/components-angular/standalone/src/directives/error.component.ts b/packages/components-angular/standalone/src/directives/error.component.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common'
-import { Component, Inject, Injector } from '@angular/core'
+import { ChangeDetectorRef, Component, Inject, Injector } from '@angular/core'
 
 import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-system-components-angular/common'
 
 @Component({
   selector: 'bal-ng-error',
-  template: `<ng-content *ngIf="hasError"></ng-content>`,
+  template: `<ng-content *ngIf="(ready | async) && hasError"></ng-content>`,
   standalone: true,
   imports: [CommonModule],
   styles: [
@@ -17,7 +17,7 @@ import { BalNgErrorComponent as BalNgErrorComponentBase } from '@baloise/design-
   ],
 })
 export class BalNgErrorComponent extends BalNgErrorComponentBase {
-  constructor(@Inject(Injector) injector: Injector) {
-    super(injector)
+  constructor(@Inject(Injector) injector: Injector, @Inject(ChangeDetectorRef) cd: ChangeDetectorRef) {
+    super(injector, cd)
   }
 }