将选择输入绑定到表单中的嵌套组件

时间:2019-06-19 08:57:12

标签: angular6 angular-components angular-forms angular-module

情况:


我们正在开发一个角度应用程序,该应用程序在整个应用程序中以各种形式使用相同的选择输入字段。当时的想法是将所有共享组件组合到(i,j) \in E中,然后以可能适用/要求的每种形式导入共享模块。

使用反应形式,我们将属性声明为:

a == 1.0

在表单级别上的绑定如下:

shared-component.module.ts

使用该组件将export class FormComponent implements OnInit { form = new FormGroup({ employeeId: new FormControl('') });作为FormControl输入:

<div class="form-group"> <employee-select [employeeId]="employeeId"> </employee-select> </div>

问题


当我们使用共享模块声明来导入组件时:

[employeeId]

并在总体export class EmployeeSelectComponent implements OnInit { employees: Employee[] @Input() employeeId: FormControl;中导入SharedComponentModule:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { EmployeeSelectComponent } from '../../components/employee-select/employee-select.component'; @NgModule({ imports: [ CommonModule ], declarations: [ EmployeeSelectComponent ], exports: [ EmployeeSelectComponent ] }) export class SharedComponentModule { }

组件可以工作,但是值不绑定到父表单吗? (即使按照各种网站的建议将整个表单作为admin.module.ts传递给组件,也是如此。

直接在import { SharedComponentModule } from '../../shared/modules/shared-component/shared-component.module'; 中分别导入每个组件时,绑定没有问题吗?

在使用@Input()封装所有共享组件的情况下,任何人都可以提供有关组件为何能正常工作但只有与父窗体的绑定失败的信息。

但是直接导入时,绑定到父表单的值可以正常工作。

真正的问题是如何创建一个可以正确封装共享组件的模块,因此我们只需要导入1个模块,而不必分别导入所有共享组件。

也尝试过


使用admin.module.tsshared-component.module.ts导出exports: [],但这没用。

0 个答案:

没有答案