3

我目前正在尝试使用 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 或多个验证指令，这些指令对于创建的每个字段都不同。

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

4

1 回答 1

4

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

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

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

.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})?$/)
    };
})())
于 2013-05-16T22:07:04.080 回答