refactor(module:form): use inject pattern (#9200)

Author: Nicoss54

components/form/form-control.component.ts

@@ -6,22 +6,23 @@
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ContentChild,
   Input,
   OnChanges,
-  OnDestroy,
   OnInit,
   SimpleChanges,
   TemplateRef,
   ViewEncapsulation,
   booleanAttribute,
-  inject
+  inject,
+  DestroyRef,
+  ChangeDetectorRef
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AbstractControl, FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms';
-import { Observable, Subject, Subscription } from 'rxjs';
-import { filter, startWith, takeUntil, tap } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { filter, startWith, tap } from 'rxjs/operators';
 
 import { helpMotion } from 'ng-zorro-antd/core/animation';
 import { NzFormStatusService } from 'ng-zorro-antd/core/form';
@@ -67,11 +68,15 @@ import { NzFormDirective } from './form.directive';
   },
   imports: [NzOutletModule]
 })
-export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, AfterContentInit, OnDestroy {
+export class NzFormControlComponent implements OnChanges, OnInit, AfterContentInit {
+  private cdr = inject(ChangeDetectorRef);
+  public i18n = inject(NzI18nService);
+  private nzFormStatusService = inject(NzFormStatusService);
+  private destroyRef = inject(DestroyRef);
+
   private _hasFeedback = false;
   private validateChanges: Subscription = Subscription.EMPTY;
   private validateString: string | null = null;
-  private destroyed$ = new Subject<void>();
   private localeId!: string;
   private autoErrorTip?: string;
 
@@ -129,7 +134,7 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft
     /** miss detect https://github.com/angular/angular/issues/10887 **/
     if (this.validateControl && this.validateControl.statusChanges) {
       this.validateChanges = (this.validateControl.statusChanges as Observable<NzSafeAny>)
-        .pipe(startWith(null), takeUntil(this.destroyed$))
+        .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
         .subscribe(() => {
           if (!this.disableAutoTips) {
             this.updateAutoErrorTip();
@@ -222,7 +227,7 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft
   }
 
   private subscribeAutoTips(observable?: Observable<NzSafeAny>): void {
-    observable?.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+    observable?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       if (!this.disableAutoTips) {
         this.updateAutoErrorTip();
         this.setStatus();
@@ -234,12 +239,8 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft
   private nzFormItemComponent = inject(NzFormItemComponent, { host: true, optional: true });
   private nzFormDirective = inject(NzFormDirective, { optional: true });
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    i18n: NzI18nService,
-    private nzFormStatusService: NzFormStatusService
-  ) {
-    this.subscribeAutoTips(i18n.localeChange.pipe(tap(locale => (this.localeId = locale.locale))));
+  constructor() {
+    this.subscribeAutoTips(this.i18n.localeChange.pipe(tap(locale => (this.localeId = locale.locale))));
     this.subscribeAutoTips(this.nzFormDirective?.getInputObservable('nzAutoTips'));
     this.subscribeAutoTips(
       this.nzFormDirective
@@ -263,11 +264,6 @@ export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, Aft
     this.setStatus();
   }
 
-  ngOnDestroy(): void {
-    this.destroyed$.next();
-    this.destroyed$.complete();
-  }
-
   ngAfterContentInit(): void {
     if (!this.validateControl && !this.validateString) {
       if (this.defaultValidateControl instanceof FormControlDirective) {

components/form/form-item.component.ts

@@ -3,8 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, ViewEncapsulation } from '@angular/core';
 
 export type NzFormControlStatusType = 'success' | 'error' | 'warning' | 'validating' | '';
 
@@ -25,13 +24,13 @@ export type NzFormControlStatusType = 'success' | 'error' | 'warning' | 'validat
   },
   template: `<ng-content></ng-content>`
 })
-export class NzFormItemComponent implements OnDestroy, OnDestroy {
+export class NzFormItemComponent {
+  private cdr = inject(ChangeDetectorRef);
+
   status: NzFormControlStatusType = '';
   hasFeedback = false;
   withHelpClass = false;
 
-  private destroy$ = new Subject<boolean>();
-
   setWithHelpViaTips(value: boolean): void {
     this.withHelpClass = value;
     this.cdr.markForCheck();
@@ -46,11 +45,4 @@ export class NzFormItemComponent implements OnDestroy, OnDestroy {
     this.hasFeedback = hasFeedback;
     this.cdr.markForCheck();
   }
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
 }

components/form/form-label.component.ts

@@ -5,16 +5,15 @@
 
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   Input,
-  OnDestroy,
   ViewEncapsulation,
   booleanAttribute,
-  inject
+  inject,
+  ChangeDetectorRef
 } from '@angular/core';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
 
 import { ThemeType } from '@ant-design/icons-angular';
 
@@ -59,7 +58,9 @@ function toTooltipIcon(value: string | NzFormTooltipIcon): Required<NzFormToolti
   },
   imports: [NzOutletModule, NzTooltipDirective, NzIconModule]
 })
-export class NzFormLabelComponent implements OnDestroy {
+export class NzFormLabelComponent {
+  private cdr = inject(ChangeDetectorRef);
+
   @Input() nzFor?: string;
   @Input({ transform: booleanAttribute }) nzRequired = false;
   @Input({ transform: booleanAttribute })
@@ -107,48 +108,41 @@ export class NzFormLabelComponent implements OnDestroy {
 
   private labelWrap: boolean | 'default' = 'default';
 
-  private destroy$ = new Subject<boolean>();
-
   private nzFormDirective = inject(NzFormDirective, { skipSelf: true, optional: true });
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor() {
     if (this.nzFormDirective) {
       this.nzFormDirective
         .getInputObservable('nzNoColon')
         .pipe(
           filter(() => this.noColon === 'default'),
-          takeUntil(this.destroy$)
+          takeUntilDestroyed()
         )
         .subscribe(() => this.cdr.markForCheck());
 
       this.nzFormDirective
         .getInputObservable('nzTooltipIcon')
         .pipe(
           filter(() => this._tooltipIcon === 'default'),
-          takeUntil(this.destroy$)
+          takeUntilDestroyed()
         )
         .subscribe(() => this.cdr.markForCheck());
 
       this.nzFormDirective
         .getInputObservable('nzLabelAlign')
         .pipe(
           filter(() => this.labelAlign === 'default'),
-          takeUntil(this.destroy$)
+          takeUntilDestroyed()
         )
         .subscribe(() => this.cdr.markForCheck());
 
       this.nzFormDirective
         .getInputObservable('nzLabelWrap')
         .pipe(
           filter(() => this.labelWrap === 'default'),
-          takeUntil(this.destroy$)
+          takeUntilDestroyed()
         )
         .subscribe(() => this.cdr.markForCheck());
     }
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
 }

components/form/form.directive.ts

@@ -4,13 +4,23 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { Directive, Input, OnChanges, OnDestroy, SimpleChange, SimpleChanges, booleanAttribute } from '@angular/core';
+import {
+  Directive,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+  booleanAttribute,
+  DestroyRef,
+  inject
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Observable, Subject } from 'rxjs';
-import { filter, map, takeUntil } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
 import { ThemeType } from '@ant-design/icons-angular';
 
-import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config';
 import { InputObservable } from 'ng-zorro-antd/core/types';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'form';
@@ -35,7 +45,10 @@ export const DefaultTooltipIcon = {
     '[class.ant-form-rtl]': `dir === 'rtl'`
   }
 })
-export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
+export class NzFormDirective implements OnChanges, InputObservable {
+  private destroyRef = inject(DestroyRef);
+  private directionality = inject(Directionality);
+
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   @Input() nzLayout: NzFormLayoutType = 'horizontal';
@@ -47,7 +60,6 @@ export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
   @Input({ transform: booleanAttribute }) @WithConfig() nzLabelWrap: boolean = false;
 
   dir: Direction = 'ltr';
-  destroy$ = new Subject<boolean>();
   private inputChanges$ = new Subject<SimpleChanges>();
 
   getInputObservable<K extends keyof this>(changeType: K): Observable<SimpleChange> {
@@ -57,23 +69,17 @@ export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
     );
   }
 
-  constructor(
-    public nzConfigService: NzConfigService,
-    private directionality: Directionality
-  ) {
+  constructor() {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntilDestroyed()).subscribe(direction => {
       this.dir = direction;
     });
+    this.destroyRef.onDestroy(() => {
+      this.inputChanges$.complete();
+    });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.inputChanges$.next(changes);
   }
-
-  ngOnDestroy(): void {
-    this.inputChanges$.complete();
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
 }