如何在Angle 5中将FormControl动态添加到FormGroup？

Question

我正在尝试建立与FormGroup和FormArray兼容的数据表。我将通过parentForm组将标头详细信息和行传递给此组件。

我创建了一个小添加按钮，单击它会动态添加新项目。在这种情况下，UI可以正常更新，但是如果我打印formGroup.value（），则只会得到传递的初始值。不是更新的formControl。我不确定我缺少什么。

export class FormTableComponent implements OnChanges {
    @Input() headers: Array<string>;
    @Input() rows: Array<any>;
    @Input() parentFG: FormGroup;
    @Input() entriesName: string;

    get entries(): FormArray {
        return <FormArray>this.parentFG.get(this.entriesName);
    }

    constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}

    ngOnChanges() {
        this.createFormControls();
    }

    createFormControls() {
        this.parentFG.controls[this.entriesName] = this.fb.array([]);
        this.rows.forEach(row => {
            this.entries.controls.push(this.fb.group(row));
        });
    }
}

演示

Answer 1

您有几个问题：1.将新行推送到FormArray控件之外的FormArray控件上

this.entries.controls.push(this.fb.group(row));

应该

this.entries.push(this.fb.group(row));

2.不要每次都创建新的FormArray并在调用时重新加载每一行createFormControls()，可以通过您的get entries()方法进行访问

解决方案1：

检查的长度entries，如果为0，则用初始化，rows否则只需将最后一行推入现有FormArray

createFormControls() {
        const keys = Object.keys(this.entries.value);
        if( keys.length === 0) {
          this.rows.forEach(row => {
              this.entries.push(this.fb.group(row));
          });
        } else {
          const row = this.rows[this.rows.length - 1];
          this.entries.push(this.fb.group(row));
        }
    }

解决方案2：

就个人而言，我更喜欢将createFormArray()和appendTo()或popFrom()放入父组件中。它很干净而且易于阅读。ChangeDetectionRef在这种情况下，我们不需要。

我createFormControls()已从一个form-table组件移到另一个dummy组件，并将其重命名为createFormArray()并进行addNewRow()了少许更改，现在一切正常

// create FormArray once
createFormArray() {
    const elements: any[] =[];

    this.rows.forEach(row => {
        elements.push(this.fb.group(row));
    });
    return this.fb.array(elements);
}

addNewRow() {
  const newRow =    {
            name: 'NAFFD',
            age: 12,
            place: 'TN'
        };

    this.rows.push(newRow);  // update rows

    const persons =  this.dummyForm.get('persons') as FormArray;
    persons.push(this.fb.group(newRow));  // update FormArray
}

初始化虚拟表单时，请执行以下操作：

   this.dummyForm = this.fb.group({
        persons: this.createFormArray(),
        store: this.fb.group({
            branch: '',
            code: ''
        })
    });

希望对您有所帮助，并祝您编程愉快！