Custom validator's message not showing

[kazoompa]

I have already read this issue: #369 but my problem is quite different.

I have added a a custom validator and message to one of my form fields:

 'staff[].title': {
   key: 'staff[].title',
   validationMessage: {
     'needTitle': function() { console.log('DEBUG!'); return 'Need title';}
   },
   $validators: {
     needTitle: function (value) {
       return value ? true : false;
     }
   }
 }

When I call $scope.$broadcast('schemaFormValidate'); all empty required fields including staff[].title indicate that there is an error. However, the field staff[].title does not show any error message. The only way the staff[].title's error message is show is when I type a character in that field then delete it.

Am I doing something wrong?

I am using the latest version of angular-schema-form (0.8.12).

Thanks for your help.

[kazoompa]

Looking at the source code of 0.8.12, it looks like the event listener of schemaFormValidate does not use the validationMessage of the form field. In any case, I tried so many different variations based on the documentation and never succeeded to see the error message. Unlike the issue #369, I don't wish to use the event scope.$broadcast('schemaForm.error.,...), I want the form validation show the error message.

Any thoughts?

[kchima]

I was actually searching just today for the same exact issue. If I just submit my required fields without updating them, I get an empty error message. If I change them and change them back, I get "field is required".

[mlegenhausen]

+1

[mlegenhausen]

Use sf-message instead of errorMessage(schemaError()). This solved the problem for me.

Documentation for sf-message can be found here: https://github.com/OptimalBPM/angular-schema-form-add-ons/blob/master/documentation/extending.md

[Anthropic]

@kazoompa Please re-open if you do not feel the question has been answered sufficiently.

[kazoompa]

@Anthropic Has this been fixed in the new release? I have sort of abandoned this issue since there were no follow ups. There is still this issue open (#601) which is basically the same question. I hope somebody can give me a hint of some sort.

Thanks.

[Anthropic]

@kazoompa I was trying to do house cleaning of nearly 200 issues and read the suggestion of using sf-messages as being a solution, have you tried that? I'll take a look tomorrow at the issue you just referenced.

[kazoompa]

@Anthropic I did and had the same result, the field correctly indicates the error but the message is not shown. Well, I wait your until you had a chance to look at the other issue. Thanks.

[BioPhoton]

I solved similar problems by using $setViewValue() and $render.

[Anthropic]

@BioPhoton could you create a plunker, demo (or PR ;) ) to show your solution in action?

[BioPhoton]

Is there an existing plunker that I can try to solve?

In my case I User onChange to edit other Fields. So it was a async Problem with the validate Event. I just used the Form obj to "rerender" the Input state...

[luizgrs]

I'm also facing this issue, here is a plunker of it: https://plnkr.co/edit/IuTv9HdwHRJpT1so6J6u?p=preview

Just run it and click in the submit form, you will see the (error) feedback in front of the field but the validation message does not appear.

if you type in the field and then erase it, you will see the message.

I know the $validator I set is too simple and could be achieves by the required one, but I made it simple just to make clear where the issue is.

[BioPhoton]

Hi @luizgrs,

i solved this stuff in different ways, always not really nice. But here is one of my approaches:

I basically create a rerenderInput function which changes the value of the input to another and then back to the old one...

var t = vm.model.Field1;
vm.theForm.Field1.$setViewValue('other value');
vm.theForm.Field1.$render();
vm.theForm.Field1.$setViewValue(t);
vm.theForm.Field1.$render();

In the plunker i putted this lines into the submitfunction as it was quick.
Here is the plunker: https://plnkr.co/edit/VPPVOQ?p=info

I believe this is not really a good solution. I'm still struggling with this issue, so let me know if it helps or if you have better ideas.

[luizgrs]

Why the problem happens I think:

Important: sfMessage uses an watchCollection in ngModel.$error to detect errors and then show messages.

• During form load validations runs and populates ngModel.$error
• WatchCollection('ngModel.$error') in sfMessage is triggered but as form field is $pristine no error message is displayed (scope.hasError() checks if field is $invalid && !$pristine
• Once we broadcast schemaFormValidate, nothing changes because ngModel.$error already has all errors set, so the watchColleciton is not triggered again and sfMessage does not get notified of the validation request.

Do you think adding a $watch('hasError()') in sfMessage would cause any trouble? We only need to detect the first value change and then we can unregister it.

That would fix the error as you can see here: https://plnkr.co/edit/Sg6QjtC2O0im3Zmus29q

If you see no problem I can do this pull request.

[BioPhoton]

Hi, nice that you investigated in this!
Now I can understand the Problem. 😀

I think watchers would decrease performance. Implementing another event in the prosess would be more efficient as the function would only fire if there is really something new.

But I guess the real issue this is in the check itselfe. Changing the expression to $invalid && $touched would solve it I believe.

THX again and please let me now if $touched solved it.

[Anthropic]

@BioPhoton and @luizgrs if you can both agree on the best and most amazingly efficient solution, please ping me, I'm watching anyway, but just in case I miss it :)

[BioPhoton]

Hi. I'm pretty sure it would work with this function:

scope.hasError = function() {
              if (!scope.ngModel) {
                return false;
              }
              return scope.ngModel.$invalid && scope.ngModel.$touched || scope.ngModel.$invalid  &&  theFormThatWrappsThisField.$submitted;
            };

The only problem is, i'm not sure how to access the wrapper form from inside this code to check for submitted...
If the $submitted is not set we could do this manually in our submit function by using theFormThatWrappsThisField.$setSubmitted(true);

[BioPhoton]

Hmmm, now i have access to form but it still not works.

return scope.ngModel.$invalid && scope.ngModel.$touched || scope.ngModel.$invalid && scope.$parent.$parent.formCtrl.$submitted;

Maybe it's better to use extra event or in worst case another watcher...

[luizgrs]

I'm trying to first write a test to show this bug but I'm failing to achieve that: luizgrs@d5a79ab

The test is still incomplete, but the error message is already being displayed after $rootScope.$apply() is executed, its assert for an empty message is already failing, even before the validate event is broadcasted.

I got the dist file from the development branch I compiled in my machine and added it to the plunkr https://plnkr.co/edit/Sg6QjtC2O0im3Zmus29q and I can still see the issue, so there is something in my test I think.

Do you have any idea why?

I'm not used to write these tests but in my head that should work...

[Anthropic]

Perhaps try it with the code in the new version too, be interested to know what changes (you can use the example folder version) needs bower and npm installs to run so may need to clone the repo.
https://github.com/json-schema-form/angular-schema-form/tree/feature/webpack-babel

[Anthropic]

This looks to work now https://plnkr.co/edit/Nx7qM8La3oUFjDnk5FF0?p=preview
Although the demo would need to be updated to ignore undefined, but other than that it should be working as expected. Please let me know if you think there is more to do.