Angular Reactive Form：如何为单个表单组件动态调用服务

Question

好的，我已经创建了一个反应式表单组件。 例如说表格是地址表格。

给定反应性地址形式的数据模型是

export interface Address {
addressId: number;
addressTypeValueId: number;
addressLine1: string;
addressLine2: string;
addressLine3: string;
postalId: number;
cityId: number;
stateCode: string;
countryCode: string;
primaryInd: string;
createDatetime: Date;
updateDatetime: Date;
createUserId: number;
updateUserId: number;

}

我创建的反应形式是

addressForm = new FormGroup ({
    name: new FormControl()
});

现在，我想在不同的组件上调用addressForm 。 例如，我有三个不同的部分，比如说学校，学院，医院

所有这三个组件都具有3种不同的数据模型以及3种不同的服务。 职位 学校 职位 学院 职位 医院

我将在这三个不同的组件中添加{form_component}，然后将数据提交到相应的模型中。

现在我不知道如何使用Submit按钮动态地绑定服务，所以当我在表单上调用Submit时。 它应该根据在哪个组件内部被调用来调用适当的服务。

Answer 1

如果这三个组件在父组件中在一起，则可以在父组件中具有addressForm ，并在这三个组件中的每个组件中以@input接收。 如果不是，请尝试将它们包装在父组件中。

您还可以有一个包含formGroup的服务/提供者，并且这三个组件可以在其构造函数上导入此服务，从而可以访问该服务中的相同formGroup

Answer 2

我建议处理组件本身中的提交点​​击。

您可以在addressForm使用EventEmitter ，并在组件中捕获它。