angularjs - 如何动态添加或删除验证

Question

我目前正在尝试使用 Angularjs 创建动态表单。出于测试目的，表单有 3 个字段，这些字段是通过 ng-repeat 指令动态添加的。

这是 JSFiddle:http://jsfiddle.net/charms/4E7zQ/3/

问题:

我目前尝试动态设置验证指令。我想实现以下目标:

<input ng-model="item.value" name="{{item.name}}" type="{{item.type}}" placeholder="{{item.placeholder}}" {{item.validators}}/>

{{item.validators}} 但是不起作用。有人知道如何在动态字段创建期间添加和删除基本和自定义验证器吗？

我想向动态添加的表单字段添加不同的验证器，如果字段被删除，我也想删除验证器:

<input ng-model="user.email" name="email" type="email" placeholder="E-Mail" required email-available/>
<input ng-model="user.firstName" name="firstName" type="email" placeholder="Firstname" required/>
<input ng-model="user.lastName" name="lastName" type="email" placeholder="Lastname" required"/>

Angularjs 可以吗？

例如，字段和验证应根据用户单击的单选按钮而改变。我想通过删除该字段并再次添加它并动态添加不同的验证指令来实现这一点。

正如您在 JSFiddle 中看到的那样，当单击“添加”按钮时，将使用“必需”指令创建 3 个字段。如果删除了一个表单域(通过单击删除按钮实现)，验证也会被删除。

现在我想添加另一个具有不同验证指令的字段，例如 email-available 或多个验证指令，它们对于创建的每个字段都是不同的。

如果有人对此有解决方案，那就太好了。

Answer 1

查看自定义验证页面 http://docs.angularjs.org/guide/forms .所有验证都发生在 ngModel Controller 中。有两个数组包含 sanitizer 和验证器 - $formatters和 $parsers .我要做的是编写一个指令，将验证器列表作为参数，并将它们添加到我上面提到的列表中或从列表中删除它们。

我看到的唯一问题是重用内置验证器。也许您可以从 source 中提取验证器函数并输入你的指令。它不是很漂亮，但也不难。

或者您可以自己编写验证器。他们每个人都只是一个正则表达式。以下是我的团队一直以来的做法:

.value('validators', (function () {
    function validatorFromRegex(regex) {
        return function (value) {
            return (!value) ? true : (value.toString().match(regex) !== null);
        };
    }
    return {
        required: function (value) { return (value !== ''); },
        path: validatorFromRegex(/^\/?([0-9A-Za-z]+[\-\/]?)*[0-9A-Za-z]+$/),
        tag: validatorFromRegex(/^([0-9A-Za-z]+\-?)*[0-9A-Za-z]+$/),
        date: validatorFromRegex(/^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d\d$/),
        spotify: validatorFromRegex(/^spotify:user:fusetv:playlist:[a-zA-Z0-9]{22}$/),
        url: validatorFromRegex(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/),
        twitter: validatorFromRegex(/^[A-Za-z0-9_]{1,15}$/),
        number: validatorFromRegex(/^\d+$/),
        phone: validatorFromRegex(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/),
        zipcode: validatorFromRegex(/^\d{5}(-\d{4})?$/)
    };
})())