#Instancing FormGroup inside effect throws Error

19 messages · Page 1 of 1 (latest)

cobalt veldt
#

Hi guys I am trying to create a new FormGroup inside an effect hook but somehow I am getting an error that the FormGroup still expects an instance. But the error doesn't appear if it's inside the constructor but outside the effect hook.

In my work project I am injecting a signal store to the class and based on the updated signal I want the effect to fire and to update the FormGroup. Is this common behaviour?

Minimal reproduction:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  form!: FormGroup;
  constructor(private fb: FormBuilder){
    //Outside effect Hook this.initForm() is triggered but not inside the effect Hook why?
    //this.initForm()
    effect(() => {
      this.initForm()
    })
  }

  initForm(){
    this.form = this.fb.group({
      name: [""]
    })
  }
}

Error:

ERROR Error: NG01052: formGroup expects a FormGroup instance. Please pass one in.

      Example:

     
  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });
white flicker
#

Hello, what is your motivation to use an effect in this situation?

#

over the constructor

cobalt veldt
#

As I am using a signal store I want to listen to the changes that are coming from the backend and refire the initForm function and update my fields whe the signal store changes. From what I understand effect is triggered on mount and when a signal is changed. On the other hand I don't want to use ngOnInit if I already use effect that should serve "the same" purpose.

white flicker
#

If you plan to use it to listen changes, it might mean there is no default value. The proper solution would be to initialize the form when you declare it and to use effect to update its value, not to initialize it.

cobalt veldt
cobalt veldt
#

okay so I tried to recreate my error and I wanted to post my current state : https://stackblitz.com/edit/stackblitz-starters-hca4tp?file=src%2Fmain.ts
I am the point where when I update the state by click (real scenario is a get request to get new fields, but for this example its a onClick method to update the store) what happens after the update the the field-name changes but somehow i am getting an Error. Getting the same error on my work project atm.
ERROR Error: There is no FormControl instance attached to form control element with name: 'bar'

I would appreciate some explanation because I dont actually know what I am doing wrong or what should I change?

white flicker
#

A real-world context would help to understand what you are trying to do

#

oh i missed the realworld explanation

#

if that's about new fields, why are you trying to mutate existing ones?

cobalt veldt
# white flicker A real-world context would help to understand what you are trying to do

I have a table where the user is able to click on it, it navigates the user to another route(/details/:id) where he loads an unknown amount of fields and also of different input types. I get the fieldNames from the backend and these fieldNames can be anything. I want to render it dynamically, because I dont know what ill get back from the backend. I am trying to mutate existing ones or an empty field because I have to w8t for the data. What would you recommend to do and how to not mutate it or create or a new FormGroup with the needed backend data?

white flicker
cobalt veldt
#

What would be the best practice approach to do it ?

white flicker
#

Yes

#

Initialize the form after retrieving data, meanwhile, conditionally hide the form.

cobalt veldt
white flicker