How modal form validation in Semantic Ui with AngularJS

[dsagredo]

I'm using semantic-ui with angular.js and have some issues with Semantic's form validation.

My code is here:

$scope.addDialog = function(){
        ModalService.showModal({
             title : "Nuevo Producto",
             htmlInclude: "modalDialog/addModal.html",
             positive: "Save",
             negative: "Cancel",
             basic: false,
             cancelable : false
        }).then(function(result){
          //form validation.
            $('.ui.form')
            .form({
                fields: {
                    name: {
                        identifier: 'name',
                        rules: [
                        {
                            type   : 'empty',
                            prompt : 'Please enter your name'
                        }
                        ]
                    }
                }
            });
        });
    });

I don´t know why validation is done in those cases. Help me.

Thank you !

[derlin]

Dear Diego, the callback (i.e. then) is called when the modal is closed, so it is obviously too late to register validation.

Actually, I never used the ui form validation framework and don't see an easy way to make it compatible with this library while keeping it generic enough.

But for a lot of usecases, including yours, simple angular bindings are enough. Indeed, the modal library accepts two parameters, positiveDisable and negativeDisable. Those are angular expressions that will be used for disabling the buttons if they return true. This won't let you show a message upon validation failure, but at least the form will not be submitted with an empty name.

I added an example in the demo: look at the editModal_content.html.

(Note: in the demo, the red left border is added using CSS. Since the input is required, the class ng-invalid will be present if the field is empty).