field-required="true" not working as expected in case of multiple controls inside a form

[pavanandhukuri]

When there are multiple angucomplete controls inside the same form, upon validating the whole form, the directive is adding autocomplete-required to the required form.$error.

But when we select value in one of the controls, directive is removing autocomplete-required without checking the status of the other autocomplete controls. This is creating a problem while validating the controls.

[ghiden]

Have a look at this one. https://github.com/ghiden/angucomplete-alt/issues/192 You need to provide class name when you use more than one directive. I'll update README about this. Sorry for the confusion.

[TommySorensen]

@ghiden # your example in http://plnkr.co/edit/aeB28M the "field-required-class" is not added to the input but only to the wrappers, but on your example page https://ghiden.github.io/angucomplete-alt/#example8 it works fine. Is this a bug?

[ghiden]

field-required-class is an optional field to change the class name. But the example 8 looks like it should say "true" instead. It takes any truthy value for field-required so it works. I probably copied the old example and wanted to use it as field-required-class to distinguish 2 fields. I'll fix it.

[TommySorensen]

@ghiden Actually its not what i meant :) What i mean is that in my website the error className specified in the attribute field-required-class is not added to the input. I have use several hours to solve the problem and found the source of the bug.

If you see this plunker http://plnkr.co/edit/xobmxNjbJSc7ahMAiCnz you can inspect the dom and see the error class is not added to the input. But if you remove the ngAnimate plugin from the module list in the app file the classname is added. Do you agree?

[ghiden]

ng-invalid-country and ng-invalid-sports added. You are not seeing this?

[TommySorensen]

@ghiden No the classes is not added to the <input> tag. See pictures: Works fine: http://oi68.tinypic.com/2res51z.jpg Dont work: http://oi65.tinypic.com/2dbqwwy.jpg

[ghiden]

I see but I don't think it's about ng-animate. Once you select something, it works. Probably I'm not checking the validity when it is loaded. Reopening this. Thanks @TommySorensen

[TommySorensen]

@ghiden But if you are not checking the validity when its loaded I have no chance to style the input with some kind of "unvalid" styling. In my case I need to know what inputs are unvalid when the user clicks submit without typing anything into the form. But the autocomplete field is the only field i cannot catch by the classname ng-unvalid or your custom invalid classname

[ghiden]

@TommySorensen It looks like it is ng-animate as you investigated. My code is doing what is supposed to do. I think it is blocking class name to be written in some way. I don't have any other way but removing it to make it work for now.

[TommySorensen]

@ghiden Any progress with the bug?

[ghiden]

@TommySorensen I labeled it as a bug but I don't think I can do anything about this. It's ngAnimate that is blocking class name to be written.

[henev]

If anyone is still struggling with this, just do interpolation on the input-class property. Example: <angucomplete-alt input-name="firstName" input-class="my-class {{myForm.firstName.$error['autocomplete-required'] ? 'my-class-with-error' : ''}}"/>

[philgin]

field-required="true" doesn't prevent the form from getting submitted like<select required /> because it doesn't add required to the generated <input> control. Is there a way around this?

[krulik]

@ghiden In my case for some reason the 'autocomplete-required' error is put only on the form but not on the input. Am I missing something?

This doesn't set the error class:

<form name="form">
  <label ng-class="{'error: form.type.$error['autocomplete-required']}">Foo</label>
  <angucomplete input-name="type" field-required="true">
</form>

This does set it:

<form name="form">
  <label ng-class="{'error: form.$error['autocomplete-required']}">Foo</label>
  <angucomplete input-name="type" field-required="true">
</form>

Before using angucomplete I had a regular input and the validation worked.

In addition - the required attribute doesn't propagate to the input field, which means that now there's no native error message. I really need it since the UX for error messages in all of our app is consistently native. Is there a way to overcome this? Can you consider propagating the required field to the input? IMHO that's the expected behaviour.

[ishapkin]

Hi, @krulik! I solved this issue with additional directive like this:

directive('validForm', [ '$rootScope', function ($rootScope) {
            return {
                restrict: 'A',
                link: function (scope, elem) {
                    elem.on('submit', function () {

                        var autoComplete = elem[0].querySelectorAll('[field-required="true"]');
                        autoComplete.forEach(function (val) {
                            var input = val.querySelector('input');
                            if(input.value === '') {
                                input.classList.add("ng-invalid");
                            }
                        });

                        var firstInvalid = elem[0].querySelector('.ng-invalid');

                        if (firstInvalid) {
                            $rootScope.modal.open({
                                templateUrl: '/views/partials/modals/form-error.html'
                            });
                            return firstInvalid.focus();
                        }
                    });
                }
            };
        }]);