angular form snippet how to validate

Question

I want to use angular to implement resuable form snippets, like

angular.module('xx').directive('snippetA', function () {
    return {
        scope: {
            form: '='
        },
        link: function (scope) {
            scope.form.validator.customValidator = function (value) {
                // return true or false;
            };
        },
        template: '<input ng-model="form.data.userName" custom-validator="form.validator.customValidator(form.data.userName)" name="userName">' + 
                '<input ng-model="form.data.userId" name="userId" required>'
    }
});

I use isolate scope to prevent scope polluting. There may be some customValidator functions.

It's just an example, the real world project is much more complex than this.

Some properties can't just be shown by a form with some inputs, so i add a data property to the form object.

<form angular-validator name="formName" angular-validator-submit="form.submit()" class="form form-horizontal">
    <snippet-a form="form"></snippet-a>
    // more inputs or snippets
    <button type="submit">submit</button>
</form>

$scope.form = {
    validator: {},
    data: {},
    submit: function () {
        // submit this.data
    }
}

Currently I use angular-validation to do form validation. It works 'OK'. But the scope of it is the scope where the 'angular-validator' exists. So I must name it with a unchangeable name, for example 'form'!

the structure is

$scope.form = {
    validator: {},
    data: {},
    submit: function ...
}

when my page contains just one form, It works fine. But when my page contains more than one form, the name of them will conflict.

What is the best practice of validating form snippets?

I think it could serve?: http://stackoverflow.com/a/30201897/1074519 — Walter Chapilliquen - wZVanG, Jun 07 '15 at 14:02
sorry it isn't, my snippt is not a single input,so i edit the question to make it more clear — user3291637, Jun 07 '15 at 15:04

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Try to add on form: name="FormScope". Angular automatically creates a variable for form handling and validations

<form name="FormScope" class="form form-horizontal">

console.log($scope.FormScope);

Demo: See this answer: https://stackoverflow.com/a/15090867/1074519

edited May 23 '17 at 12:30

Community

1
1

answered Jun 07 '15 at 14:11

Walter Chapilliquen - wZVanG

12,010
8
40
64

sorry, my question isn't so simple – user3291637 Jun 07 '15 at 15:09

angular form snippet how to validate

1 Answers1