Upon inspecting your Step1Component, I came across this method:
onFormChanges(): void {
this.stepOneForm.valueChanges
.subscribe((data: StepOneData) => {
this.registrationService.updateStepData(data);
});
}
Here is a suggested modification:
onFormChanges(): void {
this.stepOneForm.valueChanges
.subscribe((data: StepOneData) => {
const stepOneData = new StepOneData();
stepOneData.firstName = data.firstName;
stepOneData.lastName = data.lastName;
this.registrationService.updateStepData(stepOneData);
});
}
The same modification can be applied to your Step2Component.
Now, you can utilize the 'instanceof' operator as seen in your code:
if (data instanceof StepOneData) {
this.stepOneData[key] = data[key];
}
if (data instanceof StepTwoData) {
this.stepTwoData[key] = data[key];
}
=========================
To enhance readability, consider adding constructors to your StepOneData and StepTwoData classes to initialize their properties like so:
export class StepTwoData {
constructor(public city:string, public state:string){}
}
In your components:
onFormChanges(): void {
this.stepTwoForm.valueChanges
.subscribe((data: StepTwoData) => {
const stepTwoData = new StepTwoData(data.city, data.state);
this.registrationService.updateStepData(stepTwoData);
});
}
==========================
UPDATE :
For better design, I recommend creating two separate methods for each type, such as "UpdateStepOneData" and "UpdateStepTwoData."
If there is shared logic between these methods, consolidate it into a method named "UpdateStepData":
UpdateStepOneData(data: StepOneData){
// Custom Code specific to StepOneData
UpdateStepData(...); // Shared Logic goes here
}
UpdateStepTwoData(data: StepTwoData){
// Custom Code specific to StepTwoData
UpdateStepData(...); // Shared Logic goes here
}