Angular 14 reactive form how to reset formarray inside formgroup

Question

I am using Angular 14 and reactive forms. I have a form with a formarray inside formgroup. On reset, i want to reset the form and formarray with initial state. I tried

this.conditionalActionForm.reset();
this.conditionalActions.clear();

but getting the error There is no FormControl instance attached to form control element with path: 'conditionalActions -> 0 -> whenValue'

get conditionalActions(): FormArray {
    return this.conditionalActionForm.get('conditionalActions') as FormArray;
}

this.conditionalActionForm = this.formBuilder.group({
            conditionalActions: this.formBuilder.array(this.getConditionsArray())
        });
        
        private getConditionsArray(): FormGroup[] | null {
            return [
                this.formBuilder.group(
                {
                    whenValue: [''],
                    comment: [false],
                    attachment: [false],
                    actionPlan: [false]
                },
                {
                    validators: [this.checkConditionalValidation]
                })
            ];      
        }

How to clear the form and formarray and bring back to initial state.

Please provide your template code (the `*ngFor` part). – majusebetter Jul 19 '22 at 11:17 — majusebetter, Jul 19 '22 at 11:17

score 0 · Answer 1 · answered Sep 09 '22 at 08:16

0

Try resetting using clear

this.conditionalActions.clear()

answered Sep 09 '22 at 08:16

Umair Mateen

171
4

Angular 14 reactive form how to reset formarray inside formgroup

1 Answers1