fix(module:input-number): fix errors before initialization (#7531)

Author: simplejason

components/input-number/input-number-group.component.ts

@@ -57,7 +57,7 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
         [template]="nzAddOnBefore"
       ></div>
       <div
-        *ngIf="isAffix; else contentTemplate"
+        *ngIf="isAffix || hasFeedback; else contentTemplate"
         class="ant-input-number-affix-wrapper"
         [class.ant-input-number-affix-wrapper-disabled]="disabled"
         [class.ant-input-number-affix-wrapper-sm]="isSmall"
@@ -101,6 +101,9 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
     </ng-template>
     <ng-template #contentTemplate>
       <ng-content></ng-content>
+      <span *ngIf="!isAddOn && !isAffix && isFeedback" nz-input-number-group-slot type="suffix">
+        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
+      </span>
     </ng-template>
   `,
   host: {

components/input-number/input-number.component.ts

@@ -14,7 +14,6 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
-  Host,
   Input,
   NgZone,
   OnChanges,
@@ -31,7 +30,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, merge, Subject } from 'rxjs';
 import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
-import { NzFormStatusService } from 'ng-zorro-antd/core/form';
+import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import {
   BooleanInput,
@@ -44,8 +43,6 @@ import {
 } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
 
-import { NzInputNumberGroupComponent } from './input-number-group.component';
-
 @Component({
   selector: 'nz-input-number',
   exportAs: 'nzInputNumber',
@@ -90,7 +87,7 @@ import { NzInputNumberGroupComponent } from './input-number-group.component';
     </div>
     <nz-form-item-feedback-icon
       class="ant-input-number-suffix"
-      *ngIf="hasFeedback && !!status && !nzInputNumberGroupComponent?.isFeedback"
+      *ngIf="hasFeedback && !!status && !nzFormNoStatusService"
       [status]="status"
     ></nz-form-item-feedback-icon>
   `,
@@ -406,8 +403,8 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
     private renderer: Renderer2,
     @Optional() private directionality: Directionality,
     private destroy$: NzDestroyService,
-    @Host() @Optional() public nzInputNumberGroupComponent?: NzInputNumberGroupComponent,
-    @Optional() public nzFormStatusService?: NzFormStatusService
+    @Optional() public nzFormStatusService?: NzFormStatusService,
+    @Optional() public nzFormNoStatusService?: NzFormNoStatusService
   ) {}
 
   ngOnInit(): void {

components/input-number/input-number.module.ts

@@ -23,10 +23,10 @@ import { NzInputNumberComponent } from './input-number.component';
   imports: [BidiModule, CommonModule, FormsModule, NzOutletModule, NzIconModule, NzFormPatchModule],
   declarations: [
     NzInputNumberComponent,
-    NzInputNumberGroupWhitSuffixOrPrefixDirective,
     NzInputNumberGroupComponent,
+    NzInputNumberGroupWhitSuffixOrPrefixDirective,
     NzInputNumberGroupSlotComponent
   ],
-  exports: [NzInputNumberComponent, NzInputNumberGroupWhitSuffixOrPrefixDirective, NzInputNumberGroupComponent]
+  exports: [NzInputNumberComponent, NzInputNumberGroupComponent, NzInputNumberGroupWhitSuffixOrPrefixDirective]
 })
 export class NzInputNumberModule {}

components/input/input-group.component.ts

@@ -57,7 +57,7 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
         [template]="nzAddOnBefore"
       ></span>
       <span
-        *ngIf="isAffix; else contentTemplate"
+        *ngIf="isAffix || hasFeedback; else contentTemplate"
         class="ant-input-affix-wrapper"
         [class.ant-input-affix-wrapper-disabled]="disabled"
         [class.ant-input-affix-wrapper-sm]="isSmall"
@@ -101,6 +101,9 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
     </ng-template>
     <ng-template #contentTemplate>
       <ng-content></ng-content>
+      <span *ngIf="!isAddOn && !isAffix && isFeedback" nz-input-group-slot type="suffix">
+        <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon>
+      </span>
     </ng-template>
   `,
   host: {

components/input/input.directive.ts

@@ -8,7 +8,6 @@ import {
   ComponentRef,
   Directive,
   ElementRef,
-  Host,
   Input,
   OnChanges,
   OnDestroy,
@@ -23,12 +22,10 @@ import { NgControl } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
 
-import { NzFormItemFeedbackIconComponent, NzFormStatusService } from 'ng-zorro-antd/core/form';
+import { NzFormItemFeedbackIconComponent, NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
 
-import { NzInputGroupComponent } from './input-group.component';
-
 @Directive({
   selector: 'input[nz-input],textarea[nz-input]',
   exportAs: 'nzInput',
@@ -75,8 +72,8 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
     private elementRef: ElementRef,
     protected hostView: ViewContainerRef,
     @Optional() private directionality: Directionality,
-    @Host() @Optional() private nzInputGroupComponent?: NzInputGroupComponent,
-    @Optional() private nzFormStatusService?: NzFormStatusService
+    @Optional() private nzFormStatusService?: NzFormStatusService,
+    @Optional() public nzFormNoStatusService?: NzFormNoStatusService
   ) {
     renderer.addClass(elementRef.nativeElement, 'ant-input');
   }
@@ -142,7 +139,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
   }
 
   private renderFeedbackIcon(): void {
-    if (!this.status || !this.hasFeedback || this.nzInputGroupComponent?.isFeedback) {
+    if (!this.status || !this.hasFeedback || !!this.nzFormNoStatusService) {
       // remove feedback
       this.hostView.clear();
       this.feedbackRef = null;