diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts index d4c98f2fb67..59c07fa1b1e 100644 --- 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 index a94fd6b1d88..fe22ff9fd20 100644 --- 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; 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 {