fix(module:form): fix form feedback error when init with tips (#3868)

close #3865
NG-ZORRO · Jul 26, 2019 · 7c0aa51 · 7c0aa51
1 parent c4de8ff
commit 7c0aa51
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts
@@ -139,7 +139,7 @@ export class NzFormControlComponent extends NzColDirective
       this.iconType = '';
     }
     if (this.hasTips) {
-      this.nzFormItemComponent.withHelpClass = this.showInnerTip;
+      this.nzFormItemComponent.setWithHelpViaTips(this.showErrorTip);
     }
     this.controlClassMap = {
       [`has-warning`]: this.status === 'warning',

diff --git a/components/form/nz-form-item.component.ts b/components/form/nz-form-item.component.ts
@@ -58,6 +58,7 @@ export class NzFormItemComponent extends NzRowDirective
   @ContentChildren(NzFormExplainComponent, { descendants: true })
   listOfNzFormExplainComponent: QueryList<NzFormExplainComponent>;
   withHelpClass = false;
+  tipsMode = false;
 
   updateFlexStyle(): void {
     if (this.nzFlex) {
@@ -67,6 +68,12 @@ export class NzFormItemComponent extends NzRowDirective
     }
   }
 
+  setWithHelpViaTips(value: boolean): void {
+    this.tipsMode = true;
+    this.withHelpClass = value;
+    this.cdr.markForCheck();
+  }
+
   constructor(
     elementRef: ElementRef,
     renderer: Renderer2,
@@ -82,15 +89,17 @@ export class NzFormItemComponent extends NzRowDirective
   }
 
   ngAfterContentInit(): void {
-    this.listOfNzFormExplainComponent.changes
-      .pipe(
-        startWith(true),
-        takeUntil(this.destroy$)
-      )
-      .subscribe(() => {
-        this.withHelpClass = this.listOfNzFormExplainComponent && this.listOfNzFormExplainComponent.length > 0;
-        this.cdr.markForCheck();
-      });
+    if (!this.tipsMode) {
+      this.listOfNzFormExplainComponent.changes
+        .pipe(
+          startWith(true),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => {
+          this.withHelpClass = this.listOfNzFormExplainComponent && this.listOfNzFormExplainComponent.length > 0;
+          this.cdr.markForCheck();
+        });
+    }
   }
 
   ngOnInit(): void {