I am currently working on implementing a nested FormGroup. However, I have encountered an error when attempting to reset the form. Here is the structure of the form:
form: UntypedFormGroup;
this.form = this.fb.nonNullable.group({
f1: [''], f2: this.fb.nonNullable.array([], Validators.required),
f3: this.fb.nonNullable.array([]), f4: this.fb.nonNullable.array([]),
f5: this.fb.nonNullable.group({ id: ['', Validators.required] })
});
Upon resetting the form, I noticed that the required validator for the id field remains unchanged.
In a previous project using Angular 14 without any nested formgroup, I was able to reset the form completely with this.form.reset(). However, in this case, the valid state of the id field persists as false.
Is there a solution to this issue? Additionally, even though I have specified that the formgroup and formarray should not allow NULL values, the array fields are still initialized as NULL.
Current Approach:
this.form.reset();
console.log("Form after reset:", this.form.value);
console.log("Id field valid? ", this.form.get('f5').valid);
Current Result:
Output 1: Form after reset: {"f1":"","f2":[null],"f3":[],"f4":[],"f5":{"id":""}}
Output 2: Id field valid? false
NOTE: The value of the f2 field has been set to NULL, hence its presence in the output.
Expected Outcome:
Output 1: Form after reset: {"f1":"","f2":[],"f3":[],"f4":[],"f5":{"id":""}}
In the expected output, the form should reset to its initial state while maintaining the validation status of the mat-form-field linked to the id field. This will be indicated by the red coloration of the field.