What is the syntax for setting the value of FormArray using FormBuilder

Question

I cannot figure out how to patch values on an Angular form built with FormBuilder. It seems like it should be fairly obvious, but I just can't seem to get it to work. I am building a form with:

buildForm() {
const controlArray = this.redirectPortsForm.get('redirectPortsArray') as FormArray;

Object.keys(this.ports).forEach((i) => {
  controlArray.push(
    this.formBuilder.group({
      //port_entry: new FormControl({ value: this.ports[i].redirect_text, disabled: false })
      port_entry: new FormControl({ value: "", disabled: false })
    })
  )
})

console.log(controlArray.controls)
}

I've commented out a line for testing by intentionally setting it to nothing so it will be obvious when I successfully set it. I have a loop where I would like to set the value. Here is a simplified version:

const controlArray = this.redirectPortsForm.get('redirectPortsArray') as FormArray;
for (const [i, port] of ports.entries()) {
  controlArray.controls[i].patchValue({value: i.toString()});
}

I have tried many variations of this, but this is the latest. Is there something more to it? Am I missing something obvious? That code throws no errors, but also doesn't patch the values.

@RachidO I'd say FormArray can contain AbstractControl instances: FormControl, FormGroup, FormArray. So, you're not limited to FormControls. — Andrei Gătej
– Andrei Gătej, Commented Jun 11, 2020 at 7:33
My understanding was the same as @AndreiGătej's - FormArray contains AbstractControl which includes FormGroup. Now, I'm pretty new so I'm still wrapping my head around all this and FormGroup may not be necessary, but the docs seemed to indicate FormGroup was fair game. AndreiGătej, to answer your question, probably? What would the syntax be though? That's the part that's getting me. — Grant Curell
– Grant Curell, Commented Jun 11, 2020 at 13:48
Try to replace the ‘patchValue’s argument with what I suggested 3 comments above. Also, I’d recommend checking out this article on forms. — Andrei Gătej
– Andrei Gătej, Commented Jun 11, 2020 at 14:31
@AndreiGătej ohhhhhhh that's obvious now. I had spent so much time looking at this code set I forgot I had changed it to that for StackOverflow. That was it. bahahaha well, before looking at the problem again I spent a bunch of time reading about forms again so I guess I learned something 😂. Thanks! Do you want to submit that as an answer and I'll mark it as correct? — Grant Curell
– Grant Curell, Commented Jun 11, 2020 at 14:58

Andrei Gătej · Accepted Answer · 2020-06-11 15:55:04Z

1

Because your FormGroup has this structure { port_entry: new FormControl(...) }, the patchValue's argument should be { port_entry: i.toString() }.

answered Jun 11, 2020 at 15:55

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What is the syntax for setting the value of FormArray using FormBuilder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related