Как получить значение для Control внутри FormArray в Angular при отображении записи для операции patchValue

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 ...
Любая помощь будет оценена, поскольку я новичок в angular и перепробовал все возможные вариантычто я могу сделать.Спасибо.

Answer 1

Я использовал patchModelValue метод @rxweb/reactive-form-validators, он обновит значение FormControl внутри FormGroup на основе предоставленного серверного объекта JSON или объекта модели.Это обновит конкретное значение FormControl из FormGroup.Вы можете передать project.developer во время вызова API редактирования проекта.

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