fix(module:input): support Signal Forms state (#9891)

* fix(module:input): support Signal Forms state

* refactor(module:input): use Signal Forms token

Author: Laffery

components/input/input.directive.ts

@@ -22,6 +22,7 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { NgControl } from '@angular/forms';
+import { FORM_FIELD } from '@angular/forms/signals';
 import { EMPTY } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
@@ -56,6 +57,7 @@ const PREFIX_CLS = 'ant-input';
     '[class.ant-input-sm]': `finalSize() === 'small'`,
     '[attr.disabled]': 'finalDisabled() || null',
     '[attr.readonly]': 'readonly() || null',
+    '(input)': 'onInput($event)',
     '[class.ant-input-rtl]': `dir() === 'rtl'`,
     '[class.ant-input-focused]': 'focused()'
   },
@@ -72,9 +74,16 @@ export class NzInputDirective implements OnInit {
   private hostView = inject(ViewContainerRef);
   private readonly inputPasswordDir = inject(NzInputPasswordDirective, { host: true, optional: true });
   private readonly inputSearchDir = inject(NZ_INPUT_SEARCH, { host: true, optional: true });
+  private readonly formField = inject(FORM_FIELD, { self: true, optional: true });
 
   readonly ngControl = inject(NgControl, { self: true, optional: true });
-  readonly value = signal<string>(this.elementRef.nativeElement.value);
+  private readonly nativeValue = signal(this.elementRef.nativeElement.value);
+  readonly value = computed(() => {
+    if (this.formField) {
+      return String(this.formField.state().value() ?? '');
+    }
+    return this.nativeValue();
+  });
 
   readonly nzVariant = input<NzVariant>();
   readonly nzSize = input<NzSizeLDSType>('default');
@@ -83,7 +92,12 @@ export class NzInputDirective implements OnInit {
   readonly readonly = input(false, { transform: booleanAttribute });
 
   readonly controlDisabled = signal(false);
-  readonly finalDisabled = this.ngControl ? this.controlDisabled : this.disabled;
+  readonly finalDisabled = computed(() => {
+    if (this.formField) {
+      return this.formField.state().disabled();
+    }
+    return this.ngControl ? this.controlDisabled() : this.disabled();
+  });
   readonly dir = inject(Directionality).valueSignal;
   // TODO: When the input group is removed, we can remove this.
   readonly size = linkedSignal(this.nzSize);
@@ -150,10 +164,14 @@ export class NzInputDirective implements OnInit {
     this.ngControl?.valueChanges
       ?.pipe(startWith(this.ngControl?.control?.value), takeUntilDestroyed(this.destroyRef))
       .subscribe(value => {
-        this.value.set(value ?? '');
+        this.nativeValue.set(value ?? '');
       });
   }
 
+  onInput(event: Event): void {
+    this.nativeValue.set((event.target as HTMLInputElement | HTMLTextAreaElement).value);
+  }
+
   private renderFeedbackIcon(): void {
     if (!this.status() || !this.hasFeedback() || this.inputWrapper) {
       // remove feedback

components/input/input.spec.ts

@@ -6,6 +6,7 @@
 import { Component, DebugElement, signal, viewChild, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { disabled, form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 
 import { NZ_FORM_SIZE, NZ_FORM_VARIANT } from 'ng-zorro-antd/core/form';
@@ -158,6 +159,24 @@ describe('input', () => {
     });
   });
 
+  describe('input with Signal Forms', () => {
+    it('should reflect the disabled field state', async () => {
+      const fixture = TestBed.createComponent(NzTestInputSignalFormComponent);
+      fixture.autoDetectChanges();
+      await fixture.whenStable();
+
+      const input = fixture.debugElement.query(By.directive(NzInputDirective)).nativeElement as HTMLInputElement;
+      expect(input.disabled).toBe(false);
+      expect(input.classList).not.toContain('ant-input-disabled');
+
+      fixture.componentInstance.isDisabled.set(true);
+      await fixture.whenStable();
+
+      expect(input.disabled).toBe(true);
+      expect(input.classList).toContain('ant-input-disabled');
+    });
+  });
+
   testDirectionality(() => NzTestInputWithInputComponent, By.directive(NzInputDirective), 'ant-input');
 
   describe('input with status', () => {
@@ -423,6 +442,18 @@ export class NzTestInputFormComponent {
   }
 }
 
+@Component({
+  imports: [FormField, NzInputModule],
+  template: `<input nz-input [formField]="form.name" />`
+})
+export class NzTestInputSignalFormComponent {
+  readonly model = signal({ name: '' });
+  readonly isDisabled = signal(false);
+  readonly form = form(this.model, path => {
+    disabled(path.name, () => this.isDisabled());
+  });
+}
+
 // status
 @Component({
   imports: [NzInputModule],

components/input/textarea-count.component.ts

@@ -7,17 +7,15 @@ import {
   AfterContentInit,
   Component,
   ContentChild,
-  DestroyRef,
   ElementRef,
+  effect,
   inject,
+  Injector,
   Input,
   isDevMode,
   numberAttribute,
   Renderer2
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { EMPTY } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
 
 import { isNotNil } from 'ng-zorro-antd/core/util';
 
@@ -32,7 +30,7 @@ import { NzInputDirective } from './input.directive';
 })
 export class NzTextareaCountComponent implements AfterContentInit {
   private renderer = inject(Renderer2);
-  private destroyRef = inject(DestroyRef);
+  private injector = inject(Injector);
   private elementRef: ElementRef<HTMLElement> = inject(ElementRef);
 
   @ContentChild(NzInputDirective, { static: true }) nzInputDirective!: NzInputDirective;
@@ -45,18 +43,7 @@ export class NzTextareaCountComponent implements AfterContentInit {
       throw new Error('[nz-textarea-count]: Could not find matching textarea[nz-input] child.');
     }
 
-    if (this.nzInputDirective.ngControl) {
-      const valueChanges = this.nzInputDirective.ngControl.valueChanges || EMPTY;
-      valueChanges
-        .pipe(
-          takeUntilDestroyed(this.destroyRef),
-          map(() => this.nzInputDirective.ngControl!.value),
-          startWith(this.nzInputDirective.ngControl.value as string)
-        )
-        .subscribe(value => {
-          this.setDataCount(value);
-        });
-    }
+    effect(() => this.setDataCount(this.nzInputDirective.value()), { injector: this.injector });
   }
 
   setDataCount(value: string): void {

components/input/textarea-count.spec.ts

@@ -6,9 +6,10 @@
 import { Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 
-import { updateNonSignalsInput } from 'ng-zorro-antd/core/testing';
+import { dispatchFakeEvent, updateNonSignalsInput } from 'ng-zorro-antd/core/testing';
 import { NzInputModule } from 'ng-zorro-antd/input/input.module';
 import { NzTextareaCountComponent } from 'ng-zorro-antd/input/textarea-count.component';
 
@@ -62,6 +63,22 @@ describe('textarea-count', () => {
       expect(textareaCountElement.getAttribute('data-count')).toBe('4/100');
     });
   });
+
+  describe('with Signal Forms', () => {
+    it('should update the count when the field value changes', async () => {
+      const fixture = TestBed.createComponent(NzTestInputTextareaCountWithSignalFormComponent);
+      fixture.autoDetectChanges();
+      await fixture.whenStable();
+
+      const textarea = fixture.nativeElement.querySelector('textarea') as HTMLTextAreaElement;
+      const textareaCountElement = fixture.debugElement.query(By.directive(NzTextareaCountComponent)).nativeElement;
+      textarea.value = 'Signal Forms';
+      dispatchFakeEvent(textarea, 'input');
+      await fixture.whenStable();
+
+      expect(textareaCountElement.getAttribute('data-count')).toBe('12/50');
+    });
+  });
 });
 
 @Component({
@@ -87,3 +104,16 @@ export class NzTestInputTextareaCountWithoutMaxComponent {
 export class NzTestInputTextareaCountWithMaxComponent {
   readonly inputValue = signal('');
 }
+
+@Component({
+  imports: [FormField, NzInputModule],
+  template: `
+    <nz-textarea-count [nzMaxCharacterCount]="50">
+      <textarea rows="4" nz-input [formField]="form.bio"></textarea>
+    </nz-textarea-count>
+  `
+})
+export class NzTestInputTextareaCountWithSignalFormComponent {
+  readonly model = signal({ bio: '' });
+  readonly form = form(this.model);
+}