fix(form): fix visibleIf to correctly trigger reset

- close ng-alain/ng-alain#2419
ng-alain · Sep 19, 2023 · a46048c · a46048c
1 parent 7a21933
commit a46048c
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/packages/form/src/model/array.property.ts b/packages/form/src/model/array.property.ts
@@ -1,3 +1,5 @@
+import { Injector } from '@angular/core';
+
 import { AlainSFConfig } from '@delon/util/config';
 import { deepCopy } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -13,6 +15,7 @@ import { SchemaValidatorFactory } from '../validator.factory';
 
 export class ArrayProperty extends PropertyGroup {
   constructor(
+    injector: Injector,
     private formPropertyFactory: FormPropertyFactory,
     schemaValidatorFactory: SchemaValidatorFactory,
     schema: SFSchema,
@@ -22,7 +25,7 @@ export class ArrayProperty extends PropertyGroup {
     path: string,
     options: AlainSFConfig
   ) {
-    super(schemaValidatorFactory, schema, ui, formData, parent, path, options);
+    super(injector, schemaValidatorFactory, schema, ui, formData, parent, path, options);
     this.properties = [];
   }
 

diff --git a/packages/form/src/model/form.property.factory.ts b/packages/form/src/model/form.property.factory.ts
@@ -1,3 +1,5 @@
+import { Injector } from '@angular/core';
+
 import { AlainConfigService, AlainSFConfig } from '@delon/util/config';
 
 import { ArrayProperty } from './array.property';
@@ -16,6 +18,7 @@ import { SchemaValidatorFactory } from '../validator.factory';
 export class FormPropertyFactory {
   private options: AlainSFConfig;
   constructor(
+    private injector: Injector,
     private schemaValidatorFactory: SchemaValidatorFactory,
     cogSrv: AlainConfigService
   ) {
@@ -78,6 +81,7 @@ export class FormPropertyFactory {
         case 'integer':
         case 'number':
           newProperty = new NumberProperty(
+            this.injector,
             this.schemaValidatorFactory,
             schema,
             ui,
@@ -89,6 +93,7 @@ export class FormPropertyFactory {
           break;
         case 'string':
           newProperty = new StringProperty(
+            this.injector,
             this.schemaValidatorFactory,
             schema,
             ui,
@@ -100,6 +105,7 @@ export class FormPropertyFactory {
           break;
         case 'boolean':
           newProperty = new BooleanProperty(
+            this.injector,
             this.schemaValidatorFactory,
             schema,
             ui,
@@ -111,6 +117,7 @@ export class FormPropertyFactory {
           break;
         case 'object':
           newProperty = new ObjectProperty(
+            this.injector,
             this,
             this.schemaValidatorFactory,
             schema,
@@ -123,6 +130,7 @@ export class FormPropertyFactory {
           break;
         case 'array':
           newProperty = new ArrayProperty(
+            this.injector,
             this,
             this.schemaValidatorFactory,
             schema,

diff --git a/packages/form/src/model/form.property.ts b/packages/form/src/model/form.property.ts
@@ -1,4 +1,5 @@
-import { BehaviorSubject, combineLatest, Observable, distinctUntilChanged, map } from 'rxjs';
+import { Injector, NgZone } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, distinctUntilChanged, map, take } from 'rxjs';
 
 import { AlainSFConfig } from '@delon/util/config';
 import { NzFormStatusService } from 'ng-zorro-antd/core/form';
@@ -33,6 +34,7 @@ export abstract class FormProperty {
   propertyId?: string;
 
   constructor(
+    private injector: Injector,
     schemaValidatorFactory: SchemaValidatorFactory,
     schema: SFSchema,
     ui: SFUISchema | SFUISchemaItem,
@@ -312,7 +314,12 @@ export abstract class FormProperty {
     this._visibilityChanges.next(visible);
     // 渲染时需要重新触发 reset
     if (visible) {
-      this.resetValue(this.value, true);
+      this.injector
+        .get(NgZone)
+        .onStable.pipe(take(1))
+        .subscribe(() => {
+          this.resetValue(this.value, true);
+        });
     }
     return this;
   }

diff --git a/packages/form/src/model/object.property.ts b/packages/form/src/model/object.property.ts
@@ -1,3 +1,5 @@
+import { Injector } from '@angular/core';
+
 import { AlainSFConfig } from '@delon/util/config';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
@@ -17,6 +19,7 @@ export class ObjectProperty extends PropertyGroup {
   }
 
   constructor(
+    injector: Injector,
     private formPropertyFactory: FormPropertyFactory,
     schemaValidatorFactory: SchemaValidatorFactory,
     schema: SFSchema,
@@ -26,7 +29,7 @@ export class ObjectProperty extends PropertyGroup {
     path: string,
     options: AlainSFConfig
   ) {
-    super(schemaValidatorFactory, schema, ui, formData, parent, path, options);
+    super(injector, schemaValidatorFactory, schema, ui, formData, parent, path, options);
     this.createProperties();
   }
 

diff --git a/packages/form/src/sf.component.ts b/packages/form/src/sf.component.ts
@@ -5,6 +5,7 @@ import {
   Component,
   EventEmitter,
   Inject,
+  Injector,
   Input,
   OnChanges,
   OnDestroy,
@@ -41,10 +42,11 @@ import { SchemaValidatorFactory } from './validator.factory';
 import { WidgetFactory } from './widget.factory';
 
 export function useFactory(
+  injector: Injector,
   schemaValidatorFactory: SchemaValidatorFactory,
   cogSrv: AlainConfigService
 ): FormPropertyFactory {
-  return new FormPropertyFactory(schemaValidatorFactory, cogSrv);
+  return new FormPropertyFactory(injector, schemaValidatorFactory, cogSrv);
 }
 
 @Component({
@@ -56,7 +58,7 @@ export function useFactory(
     {
       provide: FormPropertyFactory,
       useFactory,
-      deps: [SchemaValidatorFactory, AlainConfigService]
+      deps: [Injector, SchemaValidatorFactory, AlainConfigService]
     },
     TerminatorService
   ],

diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts b/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts
@@ -130,7 +130,7 @@ describe('form: widget: autocomplete', () => {
             }
           }
         })
-        .time(100)
+        .dc(100)
         .typeChar(typeValue)
         .checkCount('nz-auto-option', config.uiEmailSuffixes!.length)
         .click('nz-auto-option')

diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.spec.ts b/packages/form/src/widgets/checkbox/checkbox.widget.spec.ts
@@ -37,7 +37,7 @@ describe('form: widget: checkbox', () => {
     expect(page.getEl('.ant-checkbox-checked').nextSibling!.textContent).toBe('item2');
   }));
 
-  it('#visibleIf', () => {
+  it('#visibleIf', fakeAsync(() => {
     page
       .newSchema({
         properties: {
@@ -47,8 +47,9 @@ describe('form: widget: checkbox', () => {
       })
       .checkCount(chekcWrapCls, 1)
       .click(chekcWrapCls)
+      .dc(100)
       .checkCount(chekcWrapCls, 2);
-  });
+  }));
 
   it('should be ingore title when not array data', () => {
     const title = 'test';