如何在 Angular 的 FormArray 中获取 Control 的值，同时显示 patchValue 操作的记录

Question

我一直在使用 angular 反应形式的 FormArray，一切正常，直到我尝试执行 patchValue() 操作。

在这里，我尝试编辑 projectForm。在表单中，您可以从 <select> <option> </option> </select> 添加多个 developers。选项字段中的值来自数据库，用户可以根据 he/she 的需要添加任意数量的 developers。

问题的简化代码版本如下：
project.component.ts

projectForm: FormGroup

constructor(private fb: FormBuilder, private projectService: ProjectService, private developerService: DeveloperService){ }

ngOnInit() {
    this.developerService.getDeveloper().subscribe((data) => {
        this.developers = data;
    }, (error) => {
        console.log(error)
    } 
    });

    this.projectForm = this.fb.group({
        project_name: [''],
        devs: this.fb.array([this.buildDevs()]),
    })
    this.editProject();
}

buildDevs(): FormGroup {
    return this.fb.group({
      developer: ['', Validators.required]
    });
  }

displayProject(id: number) {
    this.projectService.getProjectDetail(id).subscribe(
        (project) => this.editProject(project),
        (error) => console.log(error)
    )
}

editProject(project){
    this.projectForm.patchValue({
       project_name: project.project_name, 
    });
    this.projectForm.setControl('devs', this.fb.array(project.developer || []));
}

ProjectService 正在以正确的项目响应进行响应。里面没什么问题。
Add 和 update post 需要以相同的形式完成，并且添加形式工作正常。 `project.component.html'

<form [formGroup]="projectForm">

    <label>Name: </label>
    <input type="text" formControlName="project_name">

    <label> Developers: </label>
    <div formArrayName="devs">
        <div *ngFor="let d of projectForm.controls.devs.controls; let i = index" [formGroupName]="i">
             <select formControlName="developer" *ngIf="developers">
               <option *ngFor="let dev of developers" value="{{ dev.id }}">{{ dev.user.username }}
               </option> 
             </select>   
        </div>
    </div>
</form>

Following error in the console is present in the response whenever I visit the project edit route

选项字段编号与要编辑的项目关联的开发人员数量完全一致，但选项中没有看到开发人员的用户名。
ERROR Error: Cannot find control with path: 'devs -> 0 -> developer'
ERROR Error: Cannot find control with path: 'devs -> 1 -> developer' so on ... as the number of developer ...
任何帮助将不胜感激，因为我是 angular 的新手并尝试了所有可能的选项。谢谢。

Answer 1

在使用 patchValue 之前，您需要使用所需数量的控件初始化 FormArray。

假设 project.developer 是一个 Array of Objects 根据您的代码

[{developer: "dev1"},{developer: "dev2"},{developer: "dev3"}]

  editProject(project) {
    const devs = this.projectForm.get("devs") as FormArray;
    devs.clear();
    project.developer.forEach(d => devs.push(this.buildDevs()));
    this.projectForm.patchValue({
      project_name: project.project_name,
      devs: project.developer
    });
  }

Answer 2

我使用了@rxweb/reactive-form-validators的patchModelValue方法，它会根据提供的服务器JSON对象或模型对象更新FormGroup中FormControl的值。它将更新来自 FormGroup 的特定 FormControl 的值。您可以在编辑项目 api 调用期间传递 project.developer。

export class UserComponent implements OnInit {
    userInfoFormGroup: RxFormGroup

    constructor(
        private formBuilder: RxFormBuilder    ) { }

    ngOnInit() {
      this.userInfoFormGroup = <RxFormGroup>this.formBuilder.group({      
          devs:[
          {
            developer:['',Validators.required]
          }]
        });
    }
 getFormArray(){
      let formarray = this.userInfoFormGroup.controls.devs as FormArray;
      return formarray.controls;
    }

    editProject()
    {
          this.userInfoFormGroup.patchModelValue( {
                devs: [{ developer: "John" }] });
    }
}

您只需要在您的组件中导入 RxFormBuilder 并在您的应用模块中导入 RxReactiveFormsModule ts

请参考这个working example

如何在 Angular 的 FormArray 中获取 Control 的值，同时显示 patchValue 操作的记录

How to get the value for Control inside FormArray in Angular while displaying record for patchValue operation

angular

angular-reactive-forms

angular8