Tabs and Routes

[deanpeterson]

The current implementation of tabs is not compatible with Angularjs. If the application uses ng-view and routes, selecting a tab will not work. It will expect to follow the href in the tab to the appropriate route. That is why projects such as UI-Bootstrap were created. Many of the standard bootstrap javascript components are not compatible with angularjs out of the box.

[davidlgj]

This is not really the use case for the "tabs" form type. It's meant to be part of a form that can be validated as a whole, i.e. you can't go around removing and adding DOM elements as ng-view does.

To explain it in another way, the goal with schema form is to render a form, and the "tabs" type is just there to add grouping, the same way a fieldset does.

I guess you want to build some sort of wizard with a form on each tab? I'd suggest using ui-bootstrap for the tabs and have schema form render the form inside the tabs, not the tabs themselves.

[deanpeterson]

No, even if I'm not building a wizard; let's say I just want to use angular-schema-form inside one route (I do not intend to have the tab switch routes). Yet, when I am done with the form on one tab, I am unable to press the other tab. Ng-View will interpret that as a request to switch partials when all I want to do is stay on the same route and view the form on the other tab. Because the partial containing the angular-schema-form was injected by ng-view, the href inside the tabs of angular-schema-form will not work. All I'm saying is an angular-schema-form should still be able to function if it is inside a partial injected by ng-view. When I am done with the forms in the tabs, I want to switch to a different partial (not necessarily more forms or in wizard like fashion).

[davidlgj]

Ok, now I get it.

The issue is actually that tabs don't work when you're using ngRoute routing. This is a bug. The problem is that the "ng-click" on the tab that hides/shows appropriate tabs don't stop propagation of the event so it also triggers the regular link and that in turn triggers routing.

So basically there are a couple solutions to this:

1. Change the link to a span and apply suitable CSS rules to make it look like the link does inside a tab.
2. Add a function that also stops propagation of the event instead of just relying on an angular expression setting the value.

Maybe ui-bootstrap can be a viable option, but I'm reluctant to add more dependencies, and the tabs code is so small. But I'll check it out.

[ollivierj]

Hello,

I think I detected a side effect : validationMessage(s) coming from json schema do not display anymore after applying last bootstrap-decorator-min.js (commit c97017c) . I also wanted to solve the issue regarding propagation of "tab" clicks within a form.

[ollivierj]

I changed the tab decorator using angular-ui as a workaround for solving this current issue and preserving validationMessage(s) coming from json schema :
`

`

[davidlgj]

Hi @ollivierj,

I'm reopening the issue.

[davidlgj]

@ollivierj I'm having trouble reproducing, can you give me an example schema and form definition where the is an issue with 'validationMessage'?

[ollivierj]

I ll give you this information on next thursday.

[ollivierj]

I'm running this form inside a angular-ui modal window

form definition :

$scope.form = 
        [
        {
            type: "tabs",
            tabs: 
                [
                {
                  title: "Etat civil",
                  items:    [
                            "civilite",
                            "nom",
                            "prenom",
                            "formatedDateNaissance"
                            ]
                },
                {
                      title: "Adresse",
                      items:    [
                                "adresse1",
                                "adresse2",
                                "adresse3",
                                "ville",
                                "codePostal",
                                "codeRegion"
                                ]
                    },
                {
                    title: "Contact",
                    items:  [
                            "email",
                            "telephoneFixe",
                            "telephonePortable"
                            ]
                },
                {
                    title: "Homologations",
                    items :
                    [{
                          key: "homologations",
                          add: "Ajouter une homologation",
                          items: [
                            {
                                title: "Titre professionnel",
                                key: "homologations[].titreProfessionnel.id",
                                type : "select",
                                schema : { enum : ["1", "2"] },
                                titleMap : $scope.titreProfessionnels
                            },
                            "homologations[].formatedDateDebut",
                            "homologations[].formatedDateFin"
                          ]
                    }]
                },
                {
                    title: "Autre",
                    items:  [
                             "permis"
                            ]
                }
                ]
        },  
        {
              type: "actions",
              items:    [
                        { type: 'submit', title: 'Enregistrer' },
                        { type: 'button', title: 'Annuler', onClick: "cancel()" }
                        ]
        }
        ];

schema :

{"type":"object","properties":{"adresse1":{"type":"string","title":"Adresse 1","validationMessage":"Le format est invalide","maxLength":500},"adresse2":{"type":"string","title":"Adresse 2","validationMessage":"Le format est invalide","maxLength":500},"adresse3":{"type":"string","title":"Adresse 3","validationMessage":"Le format est invalide","maxLength":500},"civilite":{"type":"string","title":"Civilité","validationMessage":"Le format est invalide","enum":["M","Mme"],"maxLength":3},"codeNationalite":{"type":"string","title":"Code nationalité","validationMessage":"Le format est invalide","maxLength":2},"codePostal":{"type":"string","pattern":"^(([0-8][0-9])|(9[0-5]))[0-9]{3}$","title":"Code Postal","validationMessage":"Le code postal respecter la forme suivante : \"XXXXX\" ou \"2A\" ou \"2B\"","maxLength":5},"codeRegion":{"type":"string","title":"Code région de naissance","validationMessage":"Le format est invalide","maxLength":2},"dateNaissance":{"type":"object","properties":{"date":{"type":"integer"},"day":{"type":"integer"},"hours":{"type":"integer"},"minutes":{"type":"integer"},"month":{"type":"integer"},"seconds":{"type":"integer"},"time":{"type":"integer"},"timezoneOffset":{"type":"integer"},"year":{"type":"integer"}}},"email":{"type":"string","pattern":"^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,4})$","title":"Email","validationMessage":"L'adresse email doit respecter la forme suivante : \"xxxxx@xxxxx.xxx\"","maxLength":100},"formatedDateNaissance":{"type":"string","title":"Date de naissance","format":"date","validationMessage":"Le format est invalide"},"fullTextSearchFieldNames":{"type":"object"},"homologations":{"type":"array","items":{"type":"object","properties":{"dateDebut":{"type":"object","properties":{"date":{"type":"integer"},"day":{"type":"integer"},"hours":{"type":"integer"},"minutes":{"type":"integer"},"month":{"type":"integer"},"seconds":{"type":"integer"},"time":{"type":"integer"},"timezoneOffset":{"type":"integer"},"year":{"type":"integer"}}},"dateFin":{"type":"object","properties":{"date":{"type":"integer"},"day":{"type":"integer"},"hours":{"type":"integer"},"minutes":{"type":"integer"},"month":{"type":"integer"},"seconds":{"type":"integer"},"time":{"type":"integer"},"timezoneOffset":{"type":"integer"},"year":{"type":"integer"}}},"formatedDateDebut":{"type":"string","title":"Date de début de validité","format":"date","validationMessage":"Le format est invalide"},"formatedDateFin":{"type":"string","title":"Date de fin de validité","format":"date","validationMessage":"Le format est invalide"},"fullTextSearchFieldNames":{"type":"object"},"id":{"type":"integer"},"professionnelHomologue":{"$ref":"#"}}},"id":"homologations","validationMessage":"Le format est invalide"},"id":{"type":"integer"},"nom":{"type":"string","title":"Nom","validationMessage":"Le format est invalide","maxLength":50},"permis":{"type":"boolean","title":"Permis","validationMessage":"Le format est invalide"},"prenom":{"type":"string","title":"Prénom","validationMessage":"Le format est invalide","maxLength":50},"telephoneFixe":{"type":"string","pattern":"^0[1-68][0-9]{8}$","title":"Téléphone fixe","validationMessage":"Le numéro de téléphone respecter la forme suivante : \"XXXXXXXXXX\"","maxLength":14},"telephonePortable":{"type":"string","pattern":"^0[1-68][0-9]{8}$","title":"Téléphone portable","validationMessage":"Le numéro de téléphone doit respecter la forme suivante : \"XXXXXXXXXX\"","maxLength":14},"ville":{"type":"string","title":"Ville","validationMessage":"Le format est invalide","maxLength":100}},"required":["adresse1","civilite","codePostal","email","nom","prenom","ville"],"$schema":"http://json-schema.org/draft-04/schema#"}