2017-02-18 2 views
0

Мы пытаемся создать общий компонент таблицы, где элементы могут быть добавлены в таблицу или отредактированы отдельно. В таблице есть addFormFormGroup для редактирования элементов, прежде чем они будут добавлены в форму. Когда элемент добавляется к addForm, он копируется в FormArray с lodash's cloneDeep().Как рекурсивно скопировать на место FormGroup?

Проблема, с которой мы сталкиваемся сейчас, - это редактирование строки. Каждая строка в таблице имеет форму, связанную с editForm, которая существует на общем компоненте. Идея состоит в том, чтобы скопировать значения из FormArray и в editForm, а затем сделать форму видимой для пользователя. К сожалению, у нас возникают проблемы с некоторыми из наших более сложных форм, где мы пытаемся вложить эти компоненты таблицы друг в друга. Я попробовал несколько различных подходов, но каждый из них имеет свой собственный Гоча ...

Использование _.cloneDeep()

Если я копирую из FormArray в editForm с _.cloneDeep() как мы используем для копирования в FormArray, кажется, что привязки formControlName перепутались. Я предполагаю, что это потому, что замена этого FormGroup на место вызывает некоторые внутренние угловые ссылки на FormGroup? Я заводиться получаю эту ошибку:

this.editForm = _.cloneDeep(this.formArray.controls[index]) as FormGroup;

Error: There is no FormControl instance attached to form control element with name: 'myControlName' 

Использование patchValue()

Моя вторая попытка это использовать встроенный patchValue(), но это выглядит как patchValue() Безразлично» t ручка FormArray s очень хорошо.

this.editForm.patchValue((this.formArray.controls[index] as FormGroup).getRawValue());

> this.formArray.controls[0].controls['treatingPhysicians'].controls[0].controls 
    - Object 
    - address: FormGroup 
    - id: FormControl 
    - physicianFullName: FormControl 
    - __proto__: Object 
> this.editForm.controls['treatingPhysicians'].controls[0].controls 
    - [] 

Написание пользовательской функции копирования

У нас также есть наши собственные пользовательские формы функция копирования прокладки вокруг, к сожалению, это также, кажется, задушить на FormArray с, так как это трудно скажите, должны ли свойства объекта в массиве быть элементом управления или другим вложенным FormGroup.

this.editForm = this.buildOutValues((this.formArray.controls[index] as FormGroup).getRawValue(), this.editForm);

> this.formArray.controls[0].controls['treatingPhysicians'].controls[0].controls 
    - Object 
    - address: FormGroup 
    - id: FormControl 
    - physicianFullName: FormControl 
    - __proto__: Object 
> this.editForm.controls['treatingPhysicians'].controls[0].controls 
    - Object 
    - address: FormControl 
    - id: FormControl 
    - physicianFullName: FormControl 
    - __proto__: Object 

Так есть хороший способ, чтобы скопировать формы и сохранить все угловые ссылки в такт? Или есть способ, которым мы можем изменить наш метод копирования пользовательских форм и все еще иметь возможность отличать свойства, которые должны быть группами и которые должны быть элементами управления?

ответ

0

Я смог решить эту проблему, написав функцию копирования пользовательской формы, которая копирует на основе FormGroup, а не значение формы. Использовать isinstance было достаточно, чтобы выяснить, как каждый элемент управления в FormGroup должен быть скопирован.

+0

Можете ли вы поделиться функцией копирования формы, пожалуйста. Я столкнулся с одной и той же проблемой, и я, скорее всего, буду следовать той же методике реализации пользовательской копии. –

Смежные вопросы