Creates a FormGroup with 3 form controls (skillName, experienceInYears, proficiency)

Pushes the FormGroup into the FormArray

Finally, this FormArray with the existing skills of the employee is returned

setExistingSkills(skillSets: ISkill[]): FormArray {

const formArray = new FormArray([]);

skillSets.forEach(s => {

formArray.push(this.fb.group({

skillName: s.skillName,

experienceInYears:
s.experienceInYears,

proficiency: s.proficiency

}));

});

return formArray;

}

Important - Programmatically changing a formarray in angular does not change dirty state : At this point, if you remove one of the skill groups from the FormArray by clicking the "Delete Skill" button, notice the dirty and touched state of the form is still false.

This is because, the state properties like dirty, touched etc are designed to indicate whether a user has interacted with the form.

By default, programmatic change to value of a form control will not flip the value of these properties. However, in some cases you may need to mark form controls, form groups and form arrays as touched, dirty etc. In such cases you can explicitly do so by calling markAsDirty() and markAsTouched() methods.

In our case, when a SKILL form group is removed from the FormArray we want to mark the formArray as touched and dirty. To achieve this, we are using markAsDirty() and markAsTouched() methods.