如何在显示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 ...
任何帮助将不胜感激，因为我是棱角分明的新手，并尝试了所有可能的选择。 谢谢。

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在组件和RxReactiveFormsModule在您的应用程序模块TS

请参考这个工作示例

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
    });
  }