fix: support dynamic hints and errors rendering

Author: fengtianze

src/form/__snapshots__/form.component.spec.ts.snap

@@ -124,18 +124,6 @@ exports[`FormComponent should match snapshot 2`] = `
             </div>
           </div>
           
-          <div
-            class="aui-form-item__error-wrapper"
-          >
-            
-            <div
-              auiformitemerror=""
-              class="aui-form-item__error"
-            >
-              required
-            </div>
-            
-          </div>
           
           <div
             class="aui-form-item__hint-wrapper"

src/form/form-item/form-item.component.html

@@ -23,12 +23,12 @@
       </div>
     </div>
     <div
-      *ngIf="(hasError$ | async) && errors?.length"
+      *ngIf="(hasError$ | async) && (errorCount$ | async)"
       class="aui-form-item__error-wrapper"
     >
       <ng-content select="[auiFormItemError]"></ng-content>
     </div>
-    <div *ngIf="hints?.length" class="aui-form-item__hint-wrapper">
+    <div *ngIf="hintCount$ | async" class="aui-form-item__hint-wrapper">
       <ng-content select="[auiFormItemHint]"></ng-content>
     </div>
   </div>

src/form/form-item/form-item.component.ts

@@ -72,6 +72,8 @@ export class FormItemComponent implements AfterContentInit, OnDestroy {
   hints: QueryList<FormItemHintDirective>;
 
   hasError$: Observable<boolean>;
+  errorCount$: Observable<number>;
+  hintCount$: Observable<number>;
   parentForm: NgForm | FormGroupDirective;
 
   private readonly destroy$$ = new Subject<void>();
@@ -97,6 +99,16 @@ export class FormItemComponent implements AfterContentInit, OnDestroy {
         ).pipe(map(statuses => statuses.some(status => status))),
       ),
     );
+
+    this.errorCount$ = this.errors.changes.pipe(
+      map(errors => errors.length),
+      startWith(this.errors.length),
+    );
+
+    this.hintCount$ = this.hints.changes.pipe(
+      map(hints => hints.length),
+      startWith(this.hints.length),
+    );
   }
 
   subscribeInputsFromParent() {