如何通過父組件將表單傳遞給子組件（MobileItems 到 Accessories Items）？

Question

移動項目是父組件

AccessoryItems 是子組件

Mobile Items 有一個反應性的角度形式，我如何將它傳遞給另一個形式的附件組件。

移動項目 html 和組件代碼合並為一個組件，附件項目組件相同。

Answer 1

您可以使用如下輸入將整個表單從父級（ accessoryComponent ）傳遞給子級（ mobileItemComponent ）：

父母.ts

constructor(fb: FormBuilder) {
  this.form = fb.group({
    login: ['', Validators.required],
    password: [null, Validators.required]
  });
}

父.html

<child [parentForm]="form"></child>

child.ts

@Input() parentForm: FormGroup;

孩子.html

<form [formGroup]="parentForm">
   <!-- Here you can access form controls -->
</form>

Answer 2

您可以通過使用 Angular 的依賴注入輕松完成

在您的 AccessoriesItemsComponent 子組件中，只需使用 viewProviders 參數在您的子視圖中注入父表單，如下所示：

@Component({
  /* ... */

  // In case of Template driven form
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
  // In case of Reactive form
  viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]
})
export class AccessoriesItemsComponent {}