fix(from): fix can't detect change when call setValue (#1554)

Author: cipchk

packages/form/docs/qa.en-US.md

@@ -108,6 +108,12 @@ statusProperty.widget.reset('2');
 // statusProperty.widget.detectChanges();
 ```
 
+If just only update a element value, then:
+
+```ts
+this.sf.getProperty('/name')?.setValue('new name');
+```
+
 ## Why can't verify `required`
 
 Added [strict](https://ajv.js.org/options.html#strict-mode-options) mode from Ajv 7.x, and the default is `true`, when the most basic `required` is not correct When verifying, the high probability is that the Schema contains information that does not conform to the Json Schema format. This can be verified through the `debug` mode:

packages/form/docs/qa.zh-CN.md

@@ -108,6 +108,12 @@ statusProperty.widget.reset('2');
 // statusProperty.widget.detectChanges();
 ```
 
+如果单纯更新某个元素数据，则：
+
+```ts
+this.sf.getProperty('/name')?.setValue('new name');
+```
+
 ## 为什么无法校验 `required`
 
 从 Ajv 7.x 新增 [strict](https://ajv.js.org/options.html#strict-mode-options) 模式，并且默认为 `true`，当最基本的 `required` 都无法正确校验时，那大概率就是因为 Schema 包含了不符合 Json Schema 格式的信息，可以通过 `debug` 模式验证这一点：

packages/form/src/model/array.property.ts

@@ -41,6 +41,7 @@ export class ArrayProperty extends PropertyGroup {
     this.properties = [];
     this.clearErrors();
     this.resetProperties(value);
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 

packages/form/src/model/atomic.property.ts

@@ -6,6 +6,7 @@ export abstract class AtomicProperty extends FormProperty {
 
   setValue(value: SFValue, onlySelf: boolean): void {
     this._value = value;
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 
@@ -17,7 +18,10 @@ export abstract class AtomicProperty extends FormProperty {
 
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
 
-    if (this.widget) this.widget.reset(value);
+    if (this.widget) {
+      this.widget.reset(value);
+      this.cd(onlySelf);
+    }
   }
 
   _hasValue(): boolean {

packages/form/src/model/form.property.ts

@@ -121,6 +121,10 @@ export abstract class FormProperty {
    */
   abstract _updateValue(): void;
 
+  cd(onlySelf: boolean = false): void {
+    this.widget?.detectChanges(onlySelf);
+  }
+
   /**
    * 更新值且校验数据
    */
@@ -213,7 +217,7 @@ export abstract class FormProperty {
       if (customErrors instanceof Observable) {
         customErrors.subscribe(res => {
           this.setCustomErrors(errors, res);
-          this.widget.detectChanges();
+          this.cd(false);
         });
         return;
       }
@@ -376,8 +380,8 @@ export abstract class FormProperty {
 
   updateFeedback(status: NzFormControlStatusType = ''): void {
     this.ui.feedback = status;
-    this.widget.injector.get(NzFormStatusService).formStatusChanges.next({ status, hasFeedback: !!status });
-    this.widget.detectChanges();
+    this.widget?.injector.get(NzFormStatusService).formStatusChanges.next({ status, hasFeedback: !!status });
+    this.cd(true);
   }
 }
 

packages/form/src/model/number.property.ts

@@ -15,6 +15,7 @@ export class NumberProperty extends AtomicProperty {
       }
     }
     this._value = value;
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 }

packages/form/src/model/object.property.ts

@@ -58,6 +58,7 @@ export class ObjectProperty extends PropertyGroup {
         (properties[propertyId] as FormProperty).setValue(value[propertyId], true);
       }
     }
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 
@@ -69,6 +70,7 @@ export class ObjectProperty extends PropertyGroup {
         properties[propertyId].resetValue(value[propertyId], true);
       }
     }
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 

packages/form/src/model/string.property.ts

@@ -8,6 +8,7 @@ export class StringProperty extends AtomicProperty {
 
   setValue(value: SFValue, onlySelf: boolean): void {
     this._value = value == null ? '' : value;
+    this.cd(onlySelf);
     this.updateValueAndValidity({ onlySelf, emitValueEvent: true });
   }
 }

packages/form/src/widget.ts

@@ -40,7 +40,7 @@ export abstract class Widget<T extends FormProperty, UIT extends SFUISchemaItem>
   }
 
   get l(): LocaleData {
-    return this.formProperty.root.widget.sfComp!.locale;
+    return this.formProperty.root.widget!.sfComp!.locale;
   }
 
   get oh(): SFOptionalHelp {
@@ -95,7 +95,7 @@ export abstract class Widget<T extends FormProperty, UIT extends SFUISchemaItem>
     if (onlySelf) {
       this.cd.markForCheck();
     } else {
-      this.formProperty.root.widget.cd.markForCheck();
+      this.formProperty.root.widget?.cd.markForCheck();
     }
   }
 

packages/form/src/widgets/custom/custom.widget.spec.ts

@@ -12,7 +12,7 @@ describe('form: widget: custom', () => {
   };
 
   function detectChanges(path: string = '/a'): SFPage {
-    context.comp.rootProperty!.searchProperty(path)!.widget.detectChanges();
+    context.comp.rootProperty!.searchProperty(path)?.cd(true);
     fixture.detectChanges();
     return page;
   }