How to reset field, based on other fields value change?

I’m using Angular 21’s new Signal Forms. I have a search form where the user types a query, receives a paginated result list, and can move between pages.

When the user changes the search phrase, I want to automatically reset pagination.page to 0 (DEFAULT_PAGE) so the results start from the first page again.

My model:

interface SearchModel {
phrase: string;
pagination: {
page: number;
size: number;
};
}
readonly #searchModel = signal<SearchModel>({
phrase: '',
pagination: {
page: DEFAULT_PAGE,
size: DEFAULT_PAGE_SIZE,
},
});


My form:

protected readonly searchForm = form(this.#searchModel, (path) => {
debounce(path.phrase, 300);
});


I tried using an effect in the constructor to reset the page when the phrase becomes dirty and its value is empty:

effect(() => {
if (
this.searchForm.phrase().dirty() &&
this.searchForm.phrase().value().length === 0
) {
this.#searchModel.update((current) => ({
...current,
pagination: { ...current.pagination, page: DEFAULT_PAGE },
}));
}
});



This results in an infinite loop.

What is the correct way to reset pagination.page whenever the phrase value changes?

Continue reading...