fix(forms): allow custom controls to require hidden input

leonsenft · crisbeto · commit f0fb1d858167 · 2026-01-02T08:09:38.000+01:00
* Allow custom controls to make `hidden` a required input * Refactor test for `hidden` input to be consistent with other control properties * Test that `hidden` inputs are reset when the field binding changes (cherry picked from commit 82edf18)
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts
@@ -40,6 +40,7 @@ const formControlInputFields = [
   // Should be kept in sync with the `FormUiControl` bindings,
   // defined in `packages/forms/signals/src/api/control.ts`.
   'errors',
+  'hidden',
   'invalid',
   'disabled',
   'disabledReasons',
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -236,6 +236,64 @@ describe('field directive', () => {
       });
     });
 
+    describe('hidden', () => {
+      it('should bind to a custom control', () => {
+        @Component({selector: 'custom-control', template: ``})
+        class CustomControl implements FormValueControl<string> {
+          readonly value = model.required<string>();
+          readonly hidden = input.required<boolean>();
+        }
+
+        const visible = signal(false);
+
+        @Component({
+          imports: [Field, CustomControl],
+          template: `<custom-control [field]="field()" />`,
+        })
+        class TestCmp {
+          readonly f = form(signal(''), (p) => {
+            hidden(p, () => !visible());
+          });
+          readonly field = signal(this.f);
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const component = fixture.componentInstance;
+        expect(component.customControl().hidden()).toBe(true);
+
+        act(() => visible.set(true));
+        expect(component.customControl().hidden()).toBe(false);
+      });
+
+      it('should be reset when field changes on custom control', () => {
+        @Component({selector: 'custom-control', template: ``})
+        class CustomControl implements FormValueControl<string> {
+          readonly value = model.required<string>();
+          readonly hidden = input.required<boolean>();
+        }
+
+        @Component({
+          imports: [Field, CustomControl],
+          template: `<custom-control [field]="field()" />`,
+        })
+        class TestCmp {
+          readonly f = form(signal({x: 'a', y: 'b'}), (p) => {
+            hidden(p.x, () => true);
+          });
+          readonly field = signal(this.f.x);
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const component = fixture.componentInstance;
+        expect(component.customControl().hidden()).toBe(true);
+
+        act(() => component.field.set(component.f.y));
+        expect(component.customControl().hidden()).toBe(false);
+      });
+    });
+
     describe('name', () => {
       it('should bind to native control', () => {
         @Component({
@@ -2036,34 +2094,6 @@ describe('field directive', () => {
     expect(comp.myInput().invalid()).toBe(false);
   });
 
-  it('should synchronize hidden status', () => {
-    @Component({
-      selector: 'my-input',
-      template: '<input #i [value]="value()" (input)="value.set(i.value)" />',
-    })
-    class CustomInput implements FormValueControl<string> {
-      value = model('');
-      hidden = input(false);
-    }
-
-    @Component({
-      template: ` <my-input [field]="f" /> `,
-      imports: [CustomInput, Field],
-    })
-    class HiddenTestCmp {
-      myInput = viewChild.required<CustomInput>(CustomInput);
-      data = signal('');
-      f = form(this.data, (p) => {
-        hidden(p, ({value}) => value() === '');
-      });
-    }
-
-    const comp = act(() => TestBed.createComponent(HiddenTestCmp)).componentInstance;
-    expect(comp.myInput().hidden()).toBe(true);
-    act(() => comp.f().value.set('visible'));
-    expect(comp.myInput().hidden()).toBe(false);
-  });
-
   it('should synchronize dirty status', () => {
     @Component({
       selector: 'my-input',
