Как объединить дочернюю FormGroup с родительской FormGroup в Angular

Question

Я работаю с angular8, чтобы создать клиента, в основном, для создания клиента требуются данные о клиенте и сведения о поездке.

Итак, я создал компоненты CreateCustomer и поездки, внутри создания компонента поездки Injecting клиента. Из компонента командировки я создаю группу форм для командировки и используется внутри командировки html, и при каждом изменении формы командировки я отправляю форму командировки родителю с помощью Eventemitter.

В компоненте «Клиент» я пытаюсь добавить эта форма группы поездок, чтобы обеспечить ввод для создания вызова службы. У меня возникает следующая проблема, когда в командировке происходят изменения.

core.js:6185 ERROR TypeError: control.setParent is not a function
    at FormGroup.registerControl (forms.js:5071)
    at FormGroup.setControl (forms.js:5120)

Это мой родительский компонент

export class CreateCustomerComponent implements OnInit {
    constructor(private fb: FormBuilder,  private createService: CreateService, private router: Router) {
    }

    customerForm = this.fb.group({
      name: ['', Validators.required],
      address: ['', Validators.required],
      contact_name: [{value: '', disabled: true}, Validators.required],
      contact_email: [{value: '', disabled: true}, Validators.required],
      phone: [{value: '', disabled: true}]
    });

    //Here I am trying to add child form group to parent formgroup
    tripFormChangeEvent (tripFormGroup: FormGroup) {
      this.customerForm.addControl('trip',tripFormGroup);
    }

    onSubmit() {
    this.createService.create(this.customerForm)
      .subscribe(data => {
        if (data["success"]) {
          alert("Created Successfuly..!")
        }
      });
    }
}

Parent HTML,

<div class="col-sm-6 col-lg-3 form-group">
  <label for="txtName">Customer</label>
  <input type="text" id="txtName" class="form-control" formControlName="name" required>
  <div class="invalid-feedback">
      Required
  </div>
</div>

<app-trip (onFormGroupChange)="tripFormChangeEvent($event)"></app-trip> 

Дочерний компонент

export class TripComponent implements OnInit {

  @Output() onFormGroupChange = new EventEmitter<FormGroup>();

  constructor(private fb: FormBuilder) { }

  tripForm = this.fb.group({
    name: ['', Validators.required],
    cityStateZip: [''],
    pickup_date: [''],
    pickup_time: [''],
    notes: ['']
  })

  ngOnInit() {
    this.onValueChanges();
  }

  onValueChanges(): void {
    this.tripForm.valueChanges.pipe( debounceTime(1000)).subscribe(val=>{
      this.onFormGroupChange.emit(this.tripForm.value);
    })
  }

}

Ребенок HTML,

<div class="border p-2 mb-2" [formGroup]="tripForm">
<legend  class="w-auto small font-weight-bold">Trip NAme</legend>
<div class="form-row pb-sm-3">
  <div class="col-sm-6 col-lg-3 form-group">
      <label for="txtOrigName">Name</label>
      <input type="text" id="txtOrigName" class="form-control" formControlName="name" required>
      <div class="invalid-feedback">
          Required
      </div>
  </div>
</div>

Answer 1

Ошибка произошла, потому что addControl предполагает, что вы передаете formControl, но вы передаете JSON значение. ваш дочерний компонент отправляет значение формы вместо FormGroup, ваш родительский компонент tripFormChangeEvent также определяет параметр как FormGroup, измените ваш дочерний компонент на this.onFormGroupChange.emit(this.tripForm).