Error message is not hidden when invalid input is removed

[ghost]

Hi I have posted a problem on the mailing list and Peter Bacon Darwin advised me to create a bug for that. He also mentioned that #1509 was similar to my problem, but it does not solve it.

link to the mailing list question: https://groups.google.com/forum/#!topic/angular/Hao7k4xxhIU

The Problem:

I have a form that containts a list of inputs. The inputs are required so the form is invalid when an input is empty. The inputs can be added and removed.

When I add a new input it is empty by default. Thus the form gets invalid when an input is added and an error message appears that all inputs are required.

So far it works. But when I remove a empty input, the form remains invalid and the error message does not disappear.

You can see the code in the following fiddle.
http://jsfiddle.net/VPCfk/32/

[apolishch]

Any idea of when this might end up getting fixed/suggestions for a workaround?

[cj]

Wondering the same.

[Dolmio]

I'm new to the Angular so take everything with a grain of salt. I believe that the problem is that the ng-show expression "showErrorForRepeatedItem(form.$error.required, 'year')" doesn't have a way to know when "form.$error.required" or "years" is changed. When item is deleted and the $digest loop starts automatically and "showErrorForRepeatedItem(form.$error.required, 'year')" is called before the the form has updated itself.

I was able to come up with two workarounds:

1. Move the error div after the input list so the form is updated before the "showErrorForRepeatedItem(form.$error.required, 'year')" is called
2. Make custom show directive which takes models to be watched as attribute values. Fiddle for that is available here: http://jsfiddle.net/sNEtn/

[lucastorri]

I just found a hacky solution which is quick and simple: http://jsfiddle.net/HhcXT/

As you can see, I added a dummy variable (abc) which is binded to an hidden input and initialised to 0. Every time one of the inputs is removed I increment it's value, forcing angular to revalidate the form.

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[yingrui]

I met the same problem these days, we can fix the problem by forcing angular to revalidate like lucastorri did.

http://jsfiddle.net/yingrui/bsx6u/

While $digesting, the form.$valid had actually been set to true, but the variable 'dirty' in loop keeps false.
I would like to know if it is a bug or caused by design?

Thanks!

[psi-4ward]

Same issue here with 1.2.12. The fiddle exactly describes my problem

[caitp]

Hmm I don't think we ever fixed this, although I do recall seeing code which looks like it's designed to fix this, at least to some extent.

I think it would probably be worth correcting this, tbh.

[caitp]

@psi-4ward can you post a reproduction of your issue with a modern version of angular? I think the issue probably does still exist under certain conditions (since you say it does), but their fiddle actually does work correctly with 1.2.16, so I might have been wrong about the issue not being completely fixed.

There is at least one test case in the tree verifying that this works, at least in some capacity:

it('should remove form control references from the form when nested control is removed from the DOM', function() {
  doc = $compile(
    '<form name="myForm">' +
      '<input ng-if="inputPresent" name="alias" ng-model="value" store-model-ctrl/>' +
    '</form>')(scope);
  scope.inputPresent = true;
  scope.$digest();

  var form = scope.myForm;
  control.$setValidity('required', false);
  expect(form.alias).toBe(control);
  expect(form.$error.required).toEqual([control]);

  // remove nested control
  scope.inputPresent = false;
  scope.$apply();

  expect(form.$error.required).toBe(false);
  expect(form.alias).toBeUndefined();
});

[psi-4ward]

Got it working with 1.2.16! Thanks!

[Narretz]

Seems like this has worked since quite some time ago. Just tested with 1.3.0-rc.1, working still. So I'm gonna close this.

[shikshik]

@psi-4ward , How did you got it working?
I have a custom validation which gets ignored by $invalid if the condition is false or true it doesn't matter.

Do I still need to force angular to test validation? If I do, how?

[onexdata]

I still have this issue with the latest version of ng1... such a shame

[gkalpak]

I just tried updating OP's fiddle with the latest version of ng1 and the issue is gone (demo) 🎉