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;

}

我创建的Reactive表单是

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

现在我想在不同的组件上调用 addressForm 。 例如，我有三个不同的组成Say School，College，Hospital

所有这三个组件都有3种不同的数据模型以及三种不同的服务。 postSchool postCollege postHospital

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

现在我不知道如何使用提交按钮动态绑定服务，以便在表单上调用submit时。它应该调用适当的服务，具体取决于它被调用的组件。

Answer 1

如果这三个组件在父组件中一起使用，则可以在父组件中包含dynamic sampling，并在这三个组件的每一个中以@input形式接收。如果没有，如果可能的话，尝试将它们包装在父组件中。

您还可以拥有一个包含formGroup的服务/提供者，这三个组件可以在其构造函数中导入此服务，从而获得对服务中相同formGroup的访问权限

Answer 2

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

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