CODEWITHSUNDEEP
angular
Grant Curell
Grant Curell

Reputation: 1753

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

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.

Upvotes: 2

Views: 71

Answers (1)

Andrei Gătej
Andrei Gătej

Reputation: 11934

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

Upvotes: 1

Related Questions