角度响应形式，使用数组值更新控件

Question

I'm trying to update the value of an array in a form control. Simply clearing it out and attempt to set a new value results in an error. Based on other SO answers I'm attempting change values directly via a loop. I don't get errors but the values don't update:

  const voltage = this.dynamicValues.controls.voltage;

  this.voltageItems.sort();

  this.voltageItems.forEach((volt, i) => {
    const control = new FormControl(volt);
    if (voltage.value[i]) {
      (voltage as FormArray)[i] = control;
    } else {
      (voltage as FormArray).push(control);
    }
  });

  this.addComponentForm.updateValueAndValidity();

this.dynamicValues is a formGroup of controls, one of which is voltage. this.voltageItems is just an array of the selected voltages. Finally, this.addComponentForm is the parent formGroup that holds the other groups and controls. I've tried placing the updateValueAndValidity against this.dynamicValues but that didn't resolve the issue.

The initial value set by the (voltage as FormArray).push(control); sets fine, no issues, but the value isn't updating with the (voltage as FormArray)[i] = control;

If I log (voltage as FormArray)[i] after setting the new value it shows with the new value instead of what was originally set by the (voltage as FormArray).push(control); but it's not reflecting that in the form.

logging out voltage or this.dynamicValues.controls.voltage both show the original values as though the foreach never ran.

Answer 1

SO as i understood you have addComponentForm is parent form group and inside addComponentForm you have dynamicValues is another form group and inside this i assume you have voltage as form array(as you are trying to push inside). Please look at following code which worked for me.

addComponentForm: FormGroup;
  voltageItems = ['a', 'b', 'c'];

constructor(private formBuilder: FormBuilder) {}

  public ngOnInit() {
    this.addComponentForm = this.formBuilder.group({
     dynamicValues: this.formBuilder.group({
                         voltage: this.formBuilder.array([]) 
                    }),
      otherControl: [''] 
    });

    const voltage = this.addComponentForm.get('dynamicValues').get('voltage');

   this.voltageItems.sort();

  this.voltageItems.forEach((volt, i) => {
    const control = new FormControl(volt);
    if (voltage.value[i]) {
      (voltage as FormArray)[i] = control;
    } else {
      (voltage as FormArray).push(control);
    }
  });

  console.log(this.addComponentForm);

  this.addComponentForm.updateValueAndValidity();
  }

Answer 2

Really it's most simple that all this. If this.voltage is a FormArray and this.voltageItems an array of values (else, please updated the question with this data)

this.voltage=new FormArray(this.voltageItems.map(x=>new FormControl(x))

//or 
this.voltage.clear();
this.voltageItems.forEach(x=>{
    this.voltage.push(new FormControl(x));
})

A Form array is not only just an array of FormControls (or an array of FormGroups)