角度形式片段如何验证

Question

我想用 Angular 来实现可重复使用的表单 sn-ps，比如

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>'
    }
});

我使用隔离作用域来防止作用域污染。可能有一些 customValidator 函数。

这只是一个例子，现实世界的项目比这复杂得多。

某些属性不能仅由带有某些输入的表单显示，因此我将数据属性添加到表单对象。

<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
    }
}

目前我使用angular-validation 进行表单验证。 它工作正常。但它的范围是“角度验证器”存在的范围。所以我必须用一个不可更改的名称来命名它，例如'form'！

结构是

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

当我的页面只包含一个表单时，它可以正常工作。但是当我的页面包含多个表单时，它们的名称会发生​​冲突。

验证表单 sn-ps 的最佳做法是什么？

Answer 1

尝试添加表单：name="FormScope"。 Angular 会自动为表单处理和验证创建一个变量

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

console.log($scope.FormScope);

Demo：看到这个答案：https://stackoverflow.com/a/15090867/1074519