CODEWITHSUNDEEP
angularsignalsangular-reactive-formsangular-formsangular-signals
monkey
monkey

Reputation: 1651

How to set up Angular Reactive Forms with Signals

I have set up a formbuilder with a number of inputs components, each of which uses a control value accessor mixin. Where I've got to is that the input components render OK, the user inputs trigger the updateValue function in the control value accessor OK, but try as i may I can't fugure out how to propogate the change up to the form builder via the reactive form. Here's a few code snippets to show you what I mean.

The input component uses this to trigger the onChange:

  // template
  (ionChange)="onValueUpdate($event)"

  // ts
  onValueUpdate(event: Event) {
    // console.log('Event Fired:', event); // works fine
    const newValue = (event.target as HTMLInputElement).value.trim();
    this.updateValue(newValue);
  }

This fires the updateValue function in the control value accessor mixin fine:

    updateValue(value: any): void {
      console.log(`monkey control Value accessor updateValue. value = ${value}.`);
      this.value.set(value || ''); // Use signal's `.set()` method. N.B. never null / undefined
      this._onChange(value);
      this._onTouched();
    }

But this is where I get stuck. I am unable to see these changes in the form builder, which is the parent to this compoenent. I suspect it is something to do with how I am creating the formGroup and how I am reacting to changes...

  fields = input<FormField[]>([]);  // Reactive signal for fields
  
  /** COMPUTED */
  rows      = computed(() => this.computeFieldRows(this.fields()));
  formGroup = computed(() => this.computeFormGroup(this.fields()));
 
  constructor()
  {
    // Log the form state whenever it updates.
    effect(() => {
      console.log('Form Group Changed:', this.formGroup().value);
    });
  }



  /**
   *  Compute formGroup & formControls
   */
  private computeFormGroup(fields: FormField[]): FormGroup {
    const formGroup = new FormGroup({});
    console.dir(fields);
    this.fields().forEach((field) => {
      console.log(field);
      if (!formGroup.contains(field.key)) {
        const control = new FormControl(
          field.value?? '', // Default / Initial value
          field.options?.validators || [] // Validators from field options
        );
        formGroup.addControl(field.key, control);
      }
    });
    console.log(formGroup);
    return formGroup;
  };

And for completeness, this is how the input components are added in the template:

  @for (row of rows(); track row) {
    <div class="form-row" [class]="getRowClass(row)">
      @for (field of row; track field.key) {
        <div>
          @switch (field.monkeyComp.comp.name) {
            @case ('monkey-input') {
              <monkey-input
                [monkeyInput]="field.monkeyComp"
                [formControlName]="field.key"
                (clicker)="onFieldClick(field.key, 'Clicker!', $event)"
              ></monkey-input>
            }

Upvotes: 2

Views: 69

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Do not waste your time trying to integrate signals with angular reactive forms - since it does not exist (As of 25-02-2025). It is on the roadmap.

Future work, explorations, and prototyping

Why I am highlighting this is because, if you possibly make it work now, it will be future rework for you when Angular Reactive Forms for Signals is released.

For now, you can use [(ngModel)] with signals and it works great.

If you are dealing with reactive forms, leave it as it is. When the Angular Reactive Forms for Signals you can carry out a proper rework of all your reactive forms, which is a good long term approach.

Upvotes: 1

Related Questions