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

Question

我一直在以角度反应形式使用FormArray，并且一切正常，直到我尝试执行 patchValue（）操作。

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

问题的简化代码版本如下：
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以正确的项目响应进行响应。那里没事。
添加和更新帖子需要以相同的形式完成，并且添加表单也可以。 `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 ...
感谢您的帮助，因为我是angel的新手，并尝试了所有可能的选择。谢谢。

Answer 1

我使用了patchModelValue的{​​{1}}方法，它将根据提供的服务器JSON对象或模型对象更新FormGroup中FormControl的值。它将从FormGroup更新特定FormControl的值。您可以在编辑项目api调用期间传递project.developer。

@rxweb/reactive-form-validators

您只需要在组件中导入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" }] }); } } 并在应用模块ts中导入RxFormBuilder

请参阅此working example

Answer 2

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

根据您的代码，假设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
    });
  }