#formGroupDirective.resetForm() not working without setTimeout()

20 messages · Page 1 of 1 (latest)

worthy lily
#

I've had this issue since Friday. I knew the way I implemented the form related components was correct, but every time I used resetForm(), it didn’t work. Today, I was hoping to figure out what the issue was, and I thought, why not wrap it in a setTimeout() (not sure why I thought of this, I guess I was desperate), and it worked. Now, I still don’t know why, and I don't like using a setTimeout to "fix" the issue.
  ```clear() {
    this.formGroup.reset();
    setTimeout(() => {
this.formDirective.resetForm();
});
  }

@ViewChild('formDirective') private formDirective!: FormGroupDirective;```

keen steppe
#

What is fromGroup.reset() ?

worthy lily
# 
  @Input({ required: true }) formGroup!: FormGroup<ProductForm>;
pseudo mural
#

If you have direct access to your form, why do you need to resetForm() on directive, isn't it enough to do this.formGroup.reset()?

worthy lily
#

It does not reset the validation. formGroup.reset() clears the inputs, but the validation errors don't get cleared, and the inputs are still marked as touched and dirty.

timid edge
#

if you provide the form values from console and the entire component it might be easy to troubleshoot. and by the way using settimeout in angular is a bad practice use fromEvent with debouncetime rxjs operator

worthy lily
#

I don't even know what to share, since it's like 5 components and 2 services working together, which handle everything about forms.
And I was not planing on using setTimeout at all as a "fix" since it's bad.

timid edge
#

its confusing @worthy lily you have a Input decorator that is getting values from some parent component it seems and then the form directive viewchild signals to me like a templateForms why are you using two different modules in the same form. i might be wrong here without looking in to the code but you should only either use reactiveforms or templateforms in a single form do not use two different form methods inside a single form

timid edge
#

once you do that DM me i'll look in to it

worthy lily
# timid edge its confusing <@1114561722347442176> you have a Input decorator that is getting ...

ReactiveForms did not clear the form state after submit, it clears the values, but the inputs are still marked as Dirty and Touched, so what ends up happening is after user submits, the inpurs are cleared, and validations kicks in showing "required error", formGroup.reset() does not clear that.

After searching on some forums, I found that to clear the form state you use formDirective.resetForm(), and that's how I ended with both. I did not know you should not have both.

<form [formGroup]="form" #formDirective="ngForm">
timid edge
#

remove formgroup directive and try this for one time to clear some things
formGroup!: FormGroup;

#

and console the form output before and after the submission clearly we will see what is happening

timid edge
#

try this @worthy lily

constructor(
private fb: FormBuilder,
//rest

){}

form:FormGroup= this.fb.group({
//your declarations
});

pseudo mural
worthy lily
#

I did try that

pseudo mural
#

did you try clearValidators and markAsPristine ?

worthy lily
#

I did not try clearValidators, markAsPristine did not work. Will try it later

pseudo mural
#

well, clearValidators empties the list of validators, attached to the control, then as documentation states
When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

#

This is not what you want to do, you want to keep your validators list, right? To reset the validation state, you should do markAsPristine then markAsUntouched then updateValueAndValidity