时间戳

首页 > 解决方案 > 显示patchValue操作记录时如何在Angular中的FormArray中获取Control的值

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

问题描述

我一直在以角度反应形式使用 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 ...
任何帮助都将不胜感激，因为我是 Angular 的新手，并尝试了我能做的所有可能的选择。谢谢你。

标签： angularangular-reactive-formsangular8

解决方案

我使用patchModelValue的方法@rxweb/reactive-form-validators，它将根据提供的服务器 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 中导入

请参考这个工作示例

推荐阅读