Angular this(local) getting Undefined when moving to next step in MultiStepForm causing error...

I've new to angular and using angular from a month and currently i'm working on production where i've to developed the MultiStep-form.For each Step i've Separate form and last three form are are FormArray (eg :experiences could of multiple) here the initialize

this.experienceForm = this.fb.group({
Experiences: this.fb.array([this.CreateExperience()])
})

CreateExperience(): FormGroup {
return this.fb.group({
Organization: ['', Validators.required],
Designation: ['', Validators.required],
Department: ['', Validators.required],
FromDate: ['', Validators.required],
ToDate: ['', Validators.required],
StartingSalary: ['', [Validators.required, Validators.min(0)]],
EndingSalary: ['', [Validators.required, Validators.min(0)]],
address: [''],
leavingReason: [''],
});
}


but when i naviage to next Step the fields which are required show error message, After debugging i found that this is get undefined which casue this block to get execute

<div *ngIf="experience.get('StartingSalary')?.hasError('required')" class="text-danger m-2">
Starting Salary is required
</div>


when this is undefined this both conidtion becomes undefined eventually leads to true.

I've Tried to use different way especially make sure that all the fields of experience are NOT markAllAsTouched().Apart from this nothing coming in my mind

Continue reading...