[CL-352] Fix Angular errors related to form element changes (#10211)

libs/components/src/form-field/form-field.component.html

@@ -20,25 +20,25 @@
     class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:not(:has(button:enabled)):has(input:read-only)]:tw-bg-secondary-100 [&:not(:has(button:enabled)):has(textarea:read-only)]:tw-bg-secondary-100"
   >
     <div
-      #prefixSlot
-      [hidden]="prefixSlot.childElementCount === 0"
+      #prefixContainer
       class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
+      [hidden]="!prefixHasChildren()"
     >
       <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
     </div>
     <div
       class="default-content tw-w-full tw-relative tw-py-2 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
       [ngClass]="[
-        prefixSlot.childElementCount === 0 ? 'tw-rounded-l-lg tw-pl-3' : '',
-        suffixSlot.childElementCount === 0 ? 'tw-rounded-r-lg tw-pr-3' : '',
+        prefixHasChildren() ? '' : 'tw-rounded-l-lg tw-pl-3',
+        suffixHasChildren() ? '' : 'tw-rounded-r-lg tw-pr-3',
       ]"
     >
       <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
     </div>
     <div
-      #suffixSlot
-      [hidden]="suffixSlot.childElementCount === 0"
+      #suffixContainer
       class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
+      [hidden]="!suffixHasChildren()"
     >
       <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
     </div>
@@ -90,8 +90,8 @@
       }"
     >
       <div
-        #prefixSlot
-        [hidden]="prefixSlot.childElementCount === 0"
+        #prefixContainer
+        [hidden]="!prefixHasChildren()"
         class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
       >
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
@@ -100,8 +100,8 @@
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
       </div>
       <div
-        #suffixSlot
-        [hidden]="suffixSlot.childElementCount === 0"
+        #suffixContainer
+        [hidden]="!suffixHasChildren()"
         class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
       >
         <ng-container *ngTemplateOutlet="suffixContent"></ng-container>

libs/components/src/form-field/form-field.component.ts

@@ -2,6 +2,7 @@ import {
   AfterContentChecked,
   Component,
   ContentChild,
+  ElementRef,
   HostBinding,
   HostListener,
   Input,
@@ -26,6 +27,9 @@ export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChild(BitHintComponent) hint: BitHintComponent;
   @ContentChild(BitLabel) label: BitLabel;
 
+  @ViewChild("prefixContainer") prefixContainer: ElementRef<HTMLDivElement>;
+  @ViewChild("suffixContainer") suffixContainer: ElementRef<HTMLDivElement>;
+
   @ViewChild(BitErrorComponent) error: BitErrorComponent;
 
   @Input({ transform: booleanAttribute })
@@ -35,6 +39,9 @@ export class BitFormFieldComponent implements AfterContentChecked {
   @Input({ transform: booleanAttribute })
   disableReadOnlyBorder = false;
 
+  protected prefixHasChildren = signal(false);
+  protected suffixHasChildren = signal(false);
+
   get inputBorderClasses(): string {
     const shouldFocusBorderAppear = this.defaultContentIsFocused();
 
@@ -91,5 +98,8 @@ export class BitFormFieldComponent implements AfterContentChecked {
     } else {
       this.input.ariaDescribedBy = undefined;
     }
+
+    this.prefixHasChildren.set(this.prefixContainer?.nativeElement.childElementCount > 0);
+    this.suffixHasChildren.set(this.suffixContainer?.nativeElement.childElementCount > 0);
   }
 }

libs/components/src/form-field/prefix.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input, Optional } from "@angular/core";
+import { AfterContentInit, Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
 
 import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
@@ -7,15 +7,13 @@ import { BitFormFieldComponent } from "./form-field.component";
 @Directive({
   selector: "[bitPrefix]",
 })
-export class BitPrefixDirective {
+export class BitPrefixDirective implements OnInit, AfterContentInit {
   @HostBinding("class") @Input() get classList() {
     return ["tw-text-muted"];
   }
 
   @HostBinding("attr.aria-describedby")
-  get ariaDescribedBy() {
-    return this.parentFormField?.label?.id || null;
-  }
+  protected ariaDescribedBy: string;
 
   constructor(
     @Optional() private parentFormField: BitFormFieldComponent,
@@ -27,4 +25,10 @@ export class BitPrefixDirective {
       this.iconButtonComponent.size = "small";
     }
   }
+
+  ngAfterContentInit() {
+    if (this.parentFormField?.label?.id) {
+      this.ariaDescribedBy = this.parentFormField.label.id;
+    }
+  }
 }

libs/components/src/form-field/suffix.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input, Optional } from "@angular/core";
+import { AfterContentInit, Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
 
 import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
@@ -7,15 +7,13 @@ import { BitFormFieldComponent } from "./form-field.component";
 @Directive({
   selector: "[bitSuffix]",
 })
-export class BitSuffixDirective {
+export class BitSuffixDirective implements OnInit, AfterContentInit {
   @HostBinding("class") @Input() get classList() {
     return ["tw-text-muted"];
   }
 
   @HostBinding("attr.aria-describedby")
-  get ariaDescribedBy() {
-    return this.parentFormField?.label?.id || null;
-  }
+  protected ariaDescribedBy: string;
 
   constructor(
     @Optional() private parentFormField: BitFormFieldComponent,
@@ -27,4 +25,10 @@ export class BitSuffixDirective {
       this.iconButtonComponent.size = "small";
     }
   }
+
+  ngAfterContentInit() {
+    if (this.parentFormField?.label?.id) {
+      this.ariaDescribedBy = this.parentFormField.label.id;
+    }
+  }
 }