如何在 Angular 中将子 FormGroup 与父 FormGroup 组合

Question

我正在使用 angular8 创建客户，基本上创建客户需要客户详细信息和旅行详细信息。

所以我创建了一个 CreateCustomer 和行程组件，在里面创建客户注入行程组件。 从行程组件中，我正在为行程创建一个表单组，并在行程 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..!")
        }
      });
    }
}

父 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

这是您的解决方案，希望能解决

没有特定要求就不需要发出 Formgroup。 在你的情况下，没有什么

在 Create 组件中创建您的旅行表单组

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}],    
    tripForm: this.fb.group({
        name: ['', Validators.required],
        cityStateZip: [''],
        pickup_date: [''],
        pickup_time: [''],
        notes: ['']
        }),
    });

    //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..!")
        }
      });
    }
}

父 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 [customerForm]="customerForm"></app-trip> 

子组件

export class TripComponent implements OnInit {

  @Input() customerForm : FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
  }

}

儿童 HTML,

<div class="border p-2 mb-2" [formGroup]="customerForm">
<legend  class="w-auto small font-weight-bold">Trip NAme</legend>
<div class="form-row pb-sm-3" formGroupName="tripForm">
  <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 2

发生错误是因为addControl假设您传入了formControl但您传入了 JSON 值。 您的子组件发出表单值而不是FormGroup ，您的父组件tripFormChangeEvent也将参数定义为FormGroup ，将您的子组件发出更改为this.onFormGroupChange.emit(this.tripForm) 。