如何将我的表单从父组件传递到子组件(移动项目到配件项目)?

Question

移动项目是父组件

附件项是子组件

移动物品具有反应性角度形式，我如何将其传递给附件组件的另一个形式。

移动项目html和组件代码合并为一个组件，附件项目组件相同。

Answer 1

你可以通过使用 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 {}

Answer 2

您可以使用如下输入将整个表单从父级(accessoryComponent(传递到子级(mobileItemComponent( ：

父.ts

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

父母.html

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

儿童网

@Input() parentForm: FormGroup;

孩子.html

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