Issue with required validation

[kanikagupta13]

Hi,

I am facing an issue while trying to implement the required validation. I am using angular's ng-messages to display the error message when the validation fails.

But the validation message does not get displayed although user is not able to submit the form if there is no value in the selector. The form valid and invalid bit is being set correctly. Please find the url of the plunk below:

http://plnkr.co/edit/Rwi4u27NqfzQ1f2yAyeW?p=preview

I have corrected this in my code using the custom template and adding the name attribute where required validation is used as follows:

Is there any other way of doing this?

[indrimuska]

Mmhh interesting. There's no way at the moment to handle the native angular form's properties, but it could be with a little update in the template.

Does this plunker fits your needs? http://plnkr.co/edit/nvdAVhrVGEQ9UBlCXe9a?p=preview

[indrimuska]

Since Angular Selector uses two types of input (an hidden select and a text input) some features you're looking for are not available. The plunker above lets you handle the $error property when the required validation is set. Let me know which properties you also need for validation. This will absolutely be a part of the next release.

[kanikagupta13]

Hi, The above plunker also creates one more issue as I have already tried it in my code.

. I have added the name attribute only to the input tag which is as follows as per plunker:

<input name="{{name}} Search" ng-model="search" placeholder="{{!hasValue() ? placeholder : \'\'}}" ng-model-options="{ debounce: debounce }"' + 'ng-disabled="disabled" ng-required="required && !hasValue()">'

But I cannot add the required validation to the select tag which is done in plunker as follows:

<select name="{{name}}" ng-hide="true" ng-required="required && !hasValue()" ' + 'ng-model="selectedValues" multiple ng-options="option as getObjValue(option, labelAttr) for option in selectedValues" ng-hide="true">

The issue with adding the required validation above is that if there is any invalid option in the select, then it sets the oldValue or newValue depending to undefined instead of setting to an empty array. In my code I had a dependency on two lists. So one lists got populated on the change of first one.

So the code breaks on line 464

'scope.change(scope.multiple ? { newValue: newValue, oldValue: oldValue } : { newValue: newValue[0], oldValue: oldValue[0] });'

as it cannot access the 0th index of undefined.

I mainly need the required validation and a class by which we can set the select to invalid in case we need to add css to it.

[indrimuska]

That's not totally correct, the only update I made in the template is this:

<       '<select name="{{name}}" ng-hide="true" ' +
>       '<select name="{{name}}" ng-hide="true" ng-required="required && !hasValue()" ' +

The name attribute in the <input> field was just a test, you need to handle only the <select> field. The only issue I see in the plunker is at line 458, after removing the selected value. It can be resolved by updating the setValue() method like this:

scope.updateValue = function (origin) {
<   if (!angular.isDefined(origin)) origin = scope.selectedValues;
>   if (!angular.isDefined(origin)) origin = scope.selectedValues || [];
    scope.setValue(!scope.multiple ? origin[0] : origin);
};

If you also need to handle other properties like $pristine, $dirty, $touched, etc., this must be done by manually in the controller, in order to reflect every update of the input field to the select.

[kanikagupta13]

I think if the above two changes are made then the problem will be solved. I can make a change to template but I cannot make a change to the js file. So I will wait for the next release. Thank you. :)

[indrimuska]

Can you confirm that this plunker (http://plnkr.co/edit/tZdrO8163NSvMJ4VJk1J?p=preview) doesn't get you any error? I mean, try it in your use case...

[kanikagupta13]

The above plunk is getting me the same error in case of dependent selectors. I have created the following plunk depicting my scenario:

http://plnkr.co/edit/qAlBn5Y5qiZAuH6OGapn?p=preview

Steps to reproduce the issue:

1. Deselect the value from the Main Selector by clicking on 'x'.
2. See that there is no value in the dependant selector.
3. Now select the value in the main selector.
4. Click on the 'Dependant Selector'. It is not getting populated.

On console, it is throwing me following error:

[indrimuska]

Ok thank you, now I am able to see the error, let me figure it out where the problem is and I'll come back you.

[indrimuska]

@kanikagupta13 latest release v1.3.13 solves your problems, check it out!

[kanikagupta13]

Thank you @indrimuska . It worked. :+1: