Describe the problem that you experienced

If you are combining custom FormValueControl and debounce('blur') on a signal form, it will not work out of the box, which the documentation doesn't tell you how to correctly implement.

Also, I think that the touch output from FormValueControl isn't clear enough, a touch event, to me, looks more like a focus event, so I was first using it with <input (focus)="touch.emit()" /> while in fact is intended to be used with blur event <input (blur)="touch.emit()" />

Enter the URL of the topic with the problem

https://angular.dev/api/forms/signals/debounce

Describe what you were looking for in the documentation

The documentation for the debounce('blur') is lacking a dedicated section for usage with custom FormValueControl.

Something like:

For custom FormValueControl to properly work with `debounce('blur')` you must implement the `touch` output.

With a small code example:

import { Component, model, output } from '@angular/core';
import { FormValueControl } from '@angular/forms/signals';

@Component({
  selector: 'app-custom-input',
  template: `
    <input
      type="text"
      [value]="value()"
      (input)="value.set($event.target.value)"
      (blur)="touch.emit()"
    />
  `,
})
export class CustomInput implements FormValueControl<string> {
  value = model('');
  touch = output();
}

Describe the actions that led you to experience the problem

The use case that led to this problem was using a custom input like:

@Component({
  selector: 'app-custom-input',
  template: `
    <input
      type="text"
      [value]="value()"
      (input)="value.set($event.target.value)"
    />
  `,
})
export class CustomInput implements FormValueControl<string> {
  value = model('');
}

and not being able to make it work with debounce('blur'):

import { Component, effect, signal } from '@angular/core';
import { CustomInput } from './custom-input/custom-input';
import { debounce, form, FormField } from '@angular/forms/signals';

@Component({
  selector: 'app-root',
  imports: [CustomInput, FormField],
  template: `
    <app-custom-input [formField]="form.field1" />
    <input type="text" [formField]="form.field2" />
  `,
})
export class App {
  formModel = signal({
    field1: '',
    field2: '',
  });
  form = form(this.formModel, (form) => {
    debounce(form, 'blur');
  });
  constructor() {
    effect(() => {
      // will log when field2 is blurred, but not when field1 is blurred
      console.log(this.formModel());
    });
  }
}

Describe what you want to experience that would fix the problem

I'm not sure which documentation is the best place to add these clarifications:

• https://angular.dev/guide/forms/signals/custom-controls
• https://angular.dev/api/forms/signals/debounce
• https://angular.dev/api/forms/signals/FormValueControl#touch

Maybe a combination of the 3 at the same time 😅, something like:

• a full debounce code example in the custom-controls guide
• a linked reference from the debounce form api to the debounce code example in the custom-controls guide
• a better description in the FormValueControl touch api, to clarify that touch output are intended to be used with blur events and not focus events

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can