Использование сигналов с динамическими угловыми формами?

Примечание: на данный момент это лучший подход, который я могу придумать, но когда придут сигналы реактивной формы, этот код будет избыточным.

Ваш код работает нормально, все, что вам нужно сделать, это переместить цикл for, создающий элементы управления формы, в ngOnInit.

import {
  Component,
  effect,
  EventEmitter,
  inject,
  input,
  Input,
  model,
  OnChanges,
  Output,
  SimpleChanges,
  untracked,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { debounceTime, distinctUntilChanged, Subscription, tap } from 'rxjs';
import { toSignal, outputFromObservable } from '@angular/core/rxjs-interop';

export type SearchFilterOption = {
  kind: 'text' | 'search' | 'checkbox';
  label: string;
  key: string;
};

@Component({
  selector: 'shared-search-filter',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `<fieldset [formGroup] = "form">
  @for (option of filterOptions; track option; let i = $index) {
      <label>{{ option.label }}</label>
      <input [type] = "option.kind" [formControlName] = "option.key" />
  }
</fieldset>`,
})
export class SearchFilterComponent implements OnChanges {
  @Input() filter: { [key: string]: any } = {};
  @Input() filterOptions: readonly SearchFilterOption[] = [];
  @Output() filterChange = new EventEmitter<{ [key: string]: any }>();

  form = new FormGroup({});
  formChange?: Subscription;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['filterOptions']) {
      const group: { [key: string]: FormControl } = {};
      for (const filter of this.filterOptions) {
        group[filter.key] = new FormControl();
      }
      this.form = new FormGroup(group);
      this.formChange?.unsubscribe();
      this.formChange = this.form.valueChanges
        .pipe(
          debounceTime(500),
          distinctUntilChanged(
            (a, b) => JSON.stringify(a) === JSON.stringify(b)
          )
        )
        .subscribe({
          next: (values) => {
            this.filterChange.emit(values);
          },
        });
    }
    if (changes['filter']) {
      for (const key of Object.keys(this.filter)) {
        const ctrl = this.form.get(key);
        if (ctrl) {
          ctrl.setValue(this.filter[key]);
        }
      }
    }
  }
}

@Component({
  selector: 'shared-search-filter2',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `<fieldset [formGroup] = "form">
  @for (option of filterOptions(); track option; let i = $index) {
      <label>{{ option.label }}</label>
      <input [type] = "option.kind" [formControlName] = "option.key" />
  }
</fieldset>`,
})
export class SearchFilterComponent2 {
  filter = model<{ [key: string]: any }>({});
  filterOptions = input.required<readonly SearchFilterOption[]>();

  form = new FormGroup({});
  formChange?: Subscription;

  constructor() {
    effect(() => {
      if (this.formChange) {
        this.formChange.unsubscribe();
      }
      this.formChange = this.form.valueChanges
        .pipe(
          debounceTime(500),
          distinctUntilChanged(
            (a, b) => JSON.stringify(a) === JSON.stringify(b)
          ),
          tap(() => {
            untracked(() => {
              this.filter.set(this.form.value);
            });
          })
        )
        .subscribe();
    });
  }

  ngOnInit() {
    const group: { [key: string]: FormControl } = {};
    for (const filter of this.filterOptions()) {
      group[filter.key] = new FormControl(this.filter()[filter.key]);
    }
    this.form = new FormGroup(group);
  }
}

Демо-версия Stackblitz

Не зная характера ошибок, я могу лишь предполагать решение и рекомендовать некоторые изменения, чтобы упростить компонент.

1. Я считаю, что основная проблема в версии сигналов, скорее всего, связана с циклическим использованием filterOptions при построении формы с эффектом. Время запуска эффектов не обязательно будет совпадать с моментом изменения входа. Поэтому вам нужно сначала проверить, существует ли элемент управления формой, или использовать FormArray и пройти через него в шаблоне.
2. По вашему мнению, вы проходили через filterOptions напрямую, не вызывая сигнал как функцию. Если это не изменить в версии сигнала, оно сломается. Я вообще-то об этом только что предупреждал в статье — Angular Component Bindings: Transitioning from Decorators to Functions.
3. Не пересоздавайте форму при каждом изменении параметров фильтра, просто сбросьте ее и заново создайте элементы управления.
4. В форме сброс эффекта фильтра доступа с неотслеживаемым. В противном случае каждый раз, когда она меняется, форму придется переделывать.
5. Используйте отдельный эффект для обновления значений формы. Да, это может привести к некоторой избыточности, но это будет работать так же, как и раньше.
6. Вместо использования модели разделите входные и выходные данные фильтра, чтобы можно было использовать выходFromObservable для отправки изменений. Таким образом, вам не нужно поддерживать какие-либо подписки.

readonly filter = input<{ [key: string]: any }>({});
readonly filterOptions = input.required<readonly SearchFilterOption[]>();
readonly form = new FormGroup({});
readonly filterChange = outputFromObservable(this.form.valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
  ));
constructor() {
  effect(() => {
    this.form.reset();
    Object.keys(this.form.controls).forEach(key => this.form.removeControl(key));
    const filter = untracked(this.filter); // changes here won't cause an effect.
    for (const opt of this.filterOptions()) {
      this.form.addControl(opt.key, new FormControl(filter[opt.key]));
    }
  });
  effect(() => {
    const filter = this.filter();
    for (const [key, value] of Object.entries(this.filter)) {
      this.form.get(key)?.setValue(value);
    }
  });
}

<fieldset [formGroup] = "form">
  <!-- Don't forget to call fitlerOptions since it is a function now. -->
  @for (option of filterOptions(); track option; let i = $index) {
    @if (form.get(option.key); as formCtrl) {
      <label>{{ option.label }}</label>
      <input [type] = "option.kind" [formControl] = "formCtrl" />
    }
  }
</fieldset>