首页 文章

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

提问于
浏览
0

好的,我创建了一个单一的反应形式组件 . 例如,表格是地址表格 .

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

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

我将在这三个不同的组件中添加,然后将数据提交到相应的模型中 .

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

1 回答

  • 1

    如果这三个组件在父组件中一起使用,则可以在父组件中包含 addressForm ,并在这三个组件的每一个中作为@input接收 . 如果不是,如果可能,尝试将它们包装在父组件中 .

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

相关问题