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

leonsenft · crisbeto · commit 561772b15245 · 2026-01-02T08:09:39.000+01:00
* Allow custom controls to make `dirty` a required input * Refactor test for `dirty` input to be consistent with other control properties * Test that `dirty` inputs are reset when the field binding changes (cherry picked from commit 89c37f1)
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,10 +40,11 @@ const formControlInputFields = [
   // Should be kept in sync with the `FormUiControl` bindings,
   // defined in `packages/forms/signals/src/api/control.ts`.
   'errors',
-  'hidden',
-  'invalid',
+  'dirty',
   'disabled',
   'disabledReasons',
+  'hidden',
+  'invalid',
   'name',
   'readonly',
   'touched',
diff --git a/packages/forms/signals/test/web/field_directive.spec.ts b/packages/forms/signals/test/web/field_directive.spec.ts
@@ -112,6 +112,61 @@ describe('field directive', () => {
   });
 
   describe('properties', () => {
+    describe('dirty', () => {
+      it('should bind to custom control', () => {
+        @Component({
+          selector: 'custom-control',
+          template: '<input #i [value]="value()" (input)="value.set(i.value)" />',
+        })
+        class CustomControl implements FormValueControl<string> {
+          readonly value = model.required<string>();
+          readonly dirty = input.required<boolean>();
+        }
+
+        @Component({
+          template: ` <custom-control [field]="f" /> `,
+          imports: [CustomControl, Field],
+        })
+        class TestCmp {
+          readonly data = signal('');
+          readonly f = form(this.data);
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const comp = act(() => TestBed.createComponent(TestCmp)).componentInstance;
+        expect(comp.customControl().dirty()).toBe(false);
+        act(() => comp.f().markAsDirty());
+        expect(comp.customControl().dirty()).toBe(true);
+      });
+
+      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 dirty = input.required<boolean>();
+        }
+
+        @Component({
+          imports: [Field, CustomControl],
+          template: `<custom-control [field]="field()" />`,
+        })
+        class TestCmp {
+          readonly f = form(signal({x: '', y: ''}));
+          readonly field = signal(this.f.x);
+          readonly customControl = viewChild.required(CustomControl);
+        }
+
+        const fixture = act(() => TestBed.createComponent(TestCmp));
+        const component = fixture.componentInstance;
+
+        act(() => component.f.x().markAsDirty());
+        expect(component.customControl().dirty()).toBe(true);
+
+        act(() => component.field.set(component.f.y));
+        expect(component.customControl().dirty()).toBe(false);
+      });
+    });
+
     describe('disabled', () => {
       it('should bind to native control', () => {
         @Component({
@@ -2123,32 +2178,6 @@ describe('field directive', () => {
     ]);
   });
 
-  it('should synchronize dirty status', () => {
-    @Component({
-      selector: 'my-input',
-      template: '<input #i [value]="value()" (input)="value.set(i.value)" />',
-    })
-    class CustomInput implements FormValueControl<string> {
-      value = model('');
-      dirty = input(false);
-    }
-
-    @Component({
-      template: ` <my-input [field]="f" /> `,
-      imports: [CustomInput, Field],
-    })
-    class DirtyTestCmp {
-      myInput = viewChild.required<CustomInput>(CustomInput);
-      data = signal('');
-      f = form(this.data);
-    }
-
-    const comp = act(() => TestBed.createComponent(DirtyTestCmp)).componentInstance;
-    expect(comp.myInput().dirty()).toBe(false);
-    act(() => comp.f().markAsDirty());
-    expect(comp.myInput().dirty()).toBe(true);
-  });
-
   it('should synchronize pending status', async () => {
     const {promise, resolve} = promiseWithResolvers<ValidationError[]>();
 
