How to set up Angular Reactive Forms with Signals - Stack Overflow

admin管理员组

文章数量:1287583

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(() => thisputeFieldRows(this.fields()));
  formGroup = computed(() => thisputeFormGroup(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.monkeyCompp.name) {
            @case ('monkey-input') {
              <monkey-input
                [monkeyInput]="field.monkeyComp"
                [formControlName]="field.key"
                (clicker)="onFieldClick(field.key, 'Clicker!', $event)"
              ></monkey-input>
            }

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(() => thisputeFieldRows(this.fields()));
  formGroup = computed(() => thisputeFormGroup(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.monkeyCompp.name) {
            @case ('monkey-input') {
              <monkey-input
                [monkeyInput]="field.monkeyComp"
                [formControlName]="field.key"
                (clicker)="onFieldClick(field.key, 'Clicker!', $event)"
              ></monkey-input>
            }

• angular
• signals
• angular-reactive-forms
• angular-forms
• angular-signals

Share Improve this question Follow edited Feb 25 at 6:12 Naren Murali 58.1k55 gold badges4444 silver badges7676 bronze badges asked Feb 24 at 22:07 monkeymonkey 1,66122 gold badges2121 silver badges4444 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.

本文标签： How to set up Angular Reactive Forms with SignalsStack Overflow