Required fields/invalid fields in tab array

[Knuckles9090]

Is there a way to indicate an error in the tab itself. Let's say that an user enters 5 elements into a tab array and clicks submit. There is something missing in one of the tabs, so the submit is not accepted. Is there a way to indicate, in which of the tabs the error lies.

[davidlgj]

Hmmm... i don't think so. The title is interpolated so maybe something could be done with that... but I don't know how to get that information there. But it's a good idea, so I'll mark it as an enhancement request.

[deyceg]

@Knuckles9090 I think the simplest way is for you to enhance the tabs template and declare ngForm on each tab (this will allow you to isolate the fields in that specific tab). That way you'll be able to put an ng-class attribute on the tab heading for has-error (bootstrappy) if the tab form is $dirty && $invalid (hide it behind something a bit less sinister like hasError() or something). That css class then can be used do style the tab up how you like then!

[Anthropic]

@ericxinzhang 's comment on another issue offers a solution that I have seen work, but it needs to be done in a PR to be added into the project. #610 (comment)

[Anthropic]

@ericxinzhang wrote:
I had same requirement and worked out a quick solution. Note that the solution is

• Not self-contained, you will have to expose some function in your model or service for the angular-schema-form directive to call.
• Not a ideal solution, but the changes required are relatively small.

1. For tabarray, the angular-schema-form I'm using (v0.8.13) generates the input's ng-model attribute value as something like model['users']['0']['userid'], but generates the name attribute using the last part in ng-model value, in this case userid, and the only exceptional case is radiobuttons, in which case the name is users.0.userid. I updated all the templates, changed the name attribute to name="{{form.key.join('.')}}", which joins all form.key by '.'
2. I then created a service which called in ng-submit, parses the form.$error object, splits input name by '.' and then stores the errors by tab index, then by input name.
3. As the angular-schema-form directives have isolated scope and cannot access controller's scope, I added a function hasError() to the model (which is passed to directive by sf-model). This function calls the service and return true if a tab has error given the tab index.
4. Finally I updated the template to add in the ng-class to the tab: ng-class="{'validation-error': model.hasError($index)}"

Here is a demo http://plnkr.co/edit/pk4YzPlFBcjk26zr1hbY?p=preview