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

Question

我正在尝试更新表单控件中数组的值。简单清除它并尝试设置新值会导致错误。基于其他SO答案，我正尝试直接通过循环更改值。我没有收到错误，但值没有更新：

  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是formGroup的控件，其中之一是电压。 this.voltageItems只是所选电压的数组。最后，this.addComponentForm是包含其他组和控件的父级formGroup。我尝试将updateValueAndValidity与this.dynamicValues相对，但这无法解决问题。

由(voltage as FormArray).push(control);设置的初始值可以设置，没有问题，但是该值不会随着(voltage as FormArray)[i] = control;的更新

如果我在设置新值后登录(voltage as FormArray)[i]，它将显示新值，而不是(voltage as FormArray).push(control);最初设置的值，但并不能在表单中反映出来。

注销voltage或this.dynamicValues.controls.voltage都显示原始值，就像foreach从未运行过一样。

Answer 1

因此，据我了解，您有addComponentForm是父表单组，在addComponentForm内您有dynamicValues是另一个表单组，在此我假设您有voltage作为表单数组（当您尝试推入内部时）。请查看以下对我有用的代码。

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

真的，这一切最简单。如果this.voltage是一个FormArray，而this.voltageItems是一个值数组（否则，请使用此数据更新问题）

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));
})

Form数组不仅是FormControls数组（或FormGroups数组）