form.removeControl doesn't appear to remove validator | Angular Community | Page 1

covert marsh Jul 30, 2024, 11:46 AM

#

I've got a formgroup to which I'm programmatically adding/removing controls through addControl/removeControl.

A basic addControl call looks like this:

formGroup.addControl(
  field.name, 
  new FormControl(null, {
    validators: field.required ? [Validators.required] : null
  })

There are scenarios in which I'll have to remove a field and then re-add the exact same control under the same name.
This doesn't appear to remove the old validation or add the new validations causing old errors to remain and re-triggers of validation freaking out because the old reference no longer exists.

Recreating the formgroup from scratch is not really an option since I need the original reference so I can subscribe to its valuechanges stream.

brave tiger Jul 30, 2024, 11:56 AM

#

I think a Stackblitz repro would be really useful in this case.
But just to understand: you re-add a control with the same name but different validators?

covert marsh Jul 30, 2024, 2:21 PM

#

Recreating it in stackblitz is probably not possible since my code contains code that's owned by my client.

I'm guessing that my issue is caused because my fields aren't rerendering when I'm changing my controls so they still reference to the old control (I'm new to angular so this is a guess).

I've currently found a workaround however the ideal solution would be for me to somehow trigger a rerender of that particular code in my string template.

I've tried adding an id to elements which uses an unqiue identifier hoping that the update of the identifier would update the underlying code of the element but that didn't appear to work.

Is there a way to rerender particular html code without rerender the entire component?

brave tiger Jul 30, 2024, 2:26 PM

#

The ideal repro would not involve any private code.
Just a generic component using the same logic to add/remove controls.
Even just showing interesting part of ts and html would help.

covert marsh Jul 30, 2024, 2:36 PM

#

I'm afraid that it'll be quite tough considering that the majority is private code and quite complex so a quick reproduction isn't possible.

I've tried creating a simple example with the same logic in Stackblitzr however I couldn't recreate the same behavior so it might lie in the private code.

Considering that I've found a workaround I'll mark the main question as resolved.

My current solution is basically only removing/adding the unique controls. Keeping the ones that are in both the old controls and new controls. This way I don't run into the issue where my field is still referencing the old control (tldr: the control remains the same).

Apologies for taking up your time without really being able to provide more details.

brave tiger Jul 30, 2024, 2:39 PM

#

No problem.
If you ever manage to reproduce the issue, feel free to ping and link the SB.

covert marsh Jul 30, 2024, 2:47 PM

#

Will do, now that I've got you. Would you happen to know how to rerender an isolated part of a string template?

I've got a feeling I might be able to resolve the issue that way too and it'd be cleaner.

As previously mentioned I tried something like this:

<div [id]="identifier">
  <some-other-code />
</div>

Am I correct that when the identifier changes it won't re-render the <some-other-code /> part by default? Is there a way that I could get it to re-render?

#form.removeControl doesn't appear to remove validator