Угловые 2 реактивные от вложенной модели и компонентов

Question

Я создаю веб-клиент для своего API и использую для него Angular 5/6. У меня еще нет API, поэтому я могу внести некоторые изменения в модель. В моем клиенте предварительного просмотра я использовал формы на основе шаблонов, но теперь я пытаюсь использовать реактивные формы из-за проверки и тестируемости. Моя проблема с вложенными формами / компонентами, я решил использовать вложенную модель, передавая запросы:

{
    "id": 1,
    ...
    "documents": [
        {"id":1 ... items:[{"id":1},{"id":2},{"id":3}]},
        {"id":2 ... items:[]},
        {"id":3 ... items:[{"id":1},{"id":2}]},
    ]
}

Должен ли я использовать один компонент с одной вложенной формой:

formGroup: FormGroup;
itemFormGroup: FormGroup;
docFormGroup: FormGroup;

constructor(private fb: FormBuilder) { }

createForm = () => {
   this.formGroup = this.fb.group({
       id: [0, [Validations.required]],
       ...
       documents: this.fb.array([])
   });
}

createDocumentForm = () => {
   this.docFormGroup = this.fb.group({
      id: [0, [Validations.required]],
      ...
      items: this.fb.array([])
   });
}

createItemForm = () => {
   this.itemFormGroup = this.fb.group({
      id: [0, [Validations.required]],
      ...
   });
}

addDocuent = () => {
   const control = <FormArray>this.formGroup.get('documents').value;
   control.push(this.docFormGroup);
}

addItem = () => { 
   const control = <FormArray>this.formGroup.get('items').value; // by docID ofc.
   control.push(this.itemFormGroup);
}

Или я должен вырезать компоненты для каждого слоя и передать эту форму, используя @ Input / @ Output prop.?

Я испробовал оба подхода, но с первым кодом было трудно читать и управлять им. При втором подходе я не уверен, должен ли я передавать FormArray с вводом / выводом для компонента списка документов, и если передать FormGroup для компонента элемента или передать объект из API, и на каждом построении слоя новая форма зависит от потребностей?

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

Буду благодарен за пример кода для обработки сложных / вложенных моделей с помощью приложения управляемых / реагирующих форм.