显示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 正在响应正确的项目响应。那里没有错。
Add 和 update 帖子需要以相同的形式完成，并且添加形式工作正常。 `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

我使用了@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，在你的应用模块ts中导入RxReactiveFormsModule

请参考working example

Answer 2

在使用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
    });
  }