如何在 Angular 10 中修补动态表单数组的值？

Question

我有一个动态 formArray，保存数据，一切工作正常，但我在修补值时遇到问题，而且我在网上找不到任何确切的解决方案。下面是代码，    <form [formGroup]="educationAndExperienceForm">        <div formArrayName="educationForm">            <div *ngFor="let education of educationAndExperienceForm.controls.educationForm['controls'];let i = index;"                [formGroupName]="i">                <h6 class="text-left circularBold" *ngIf="i == 0"><b>Highest Qualification</b></h6>                <input type="text" class="education-inputs w-100 mt-3" placeholder="School/College/University"                    formControlName="school"                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">                <input type="text" class="education-inputs w-100 mt-3" placeholder="Degree Ex: Master's"                    formControlName="degree"                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">                <input type="text" class="education-inputs w-100 mt-3"                    placeholder="Field of Education Ex: Computer Science" formControlName="specialization"                    [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">                <div class="text-left">                    <input type="text" class="education-inputs w-100 mt-3" placeholder="Graduate Year"                        formControlName="passed_year"                        [ngClass]="{ 'input-error': submitted && educationAndExperienceForm.controls.educationForm.controls[i].invalid }">                </div>对于我使用的第一种方式，我收到无法使用 forEach.. 错误

Answer 1

问题似乎 patchValue 无法填充表单数组。您可以使用push()像常规数组一样填充表单数组。

假设您的 this.qualificationData 是一个包含许多“expertsQualification”（数组类型）的数组，并且类/接口 ExpertsQualification 具有属性“school”、“level”、“specialization”和“passed_year”，您可以执行以下操作：

(this.educationAndExperienceForm.controls.educationForm as FormArray).reset(); //reset the FormArray

this.qualificationData.forEach(x => {

    (this.educationAndExperienceForm.controls.educationForm as FormArray)

    .push(this.fb.group({

        school: [x.school, Validators.required],

        degree: [x.degree, Validators.required],

        specialization: [x.specialization, Validators.required],

        passed_year: [x.passed_year, Validators.required]

    });

};

..这样您就可以循环遍历数组，并为每个元素将表单组推送到表单数组。请注意，将其转换为 FormArray 非常重要，例如

(this.educationAndExperienceForm.controls.educationForm as FormArray)

如果你不这样做，它将保留为 AbstractControl，并且你将无法使用数组函数，如推、拉等。