CODEWITHSUNDEEP
angularangular2-routingangular2-formsangular-reactive-forms
dprophecyguy
dprophecyguy

Reputation: 273

Angular Reactive Form : How to call services dynamically for a single form component

Okay i have created a single reactive form component. For example say the form is an address form.

The data model for given reactive address form is 

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;

}

And the Reactive form i have created is 

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

Now i want to call the addressForm on different components. For example i have three different component Say School, College, Hospital

All of these three components have 3 different data models along with three different services. postSchool postCollege postHospital

I'll be adding the {form_component} in these three different components and then submitting the data into the respective model.

Now i don't know how to bind a service dynamically with Submit button so when i call submit on the form. It should call the appropriate service depending inside which component it has been called.

Upvotes: 0

Views: 653

Answers (2)

shhdharmen
shhdharmen

Reputation: 1453

I would suggest handling submit click in the component itself.

You can use EventEmitter in your addressForm, and capture the same in your component.

Upvotes: 0

assisrMatheus
assisrMatheus

Reputation: 475

If these three components are together in a parent component, you can have addressForm in the parent component and receive as an @input in each of these three components. If not and if possible, try to wrap them in a parent component.

You could also have a service/provider that contains the formGroup and those three components can import this service on their constructors, gaining access to the same formGroup inside the service

Upvotes: 1

Related Questions