Angularjs 动态 n- 模式验证

我有一个表单，如果一个复选框为 false，那么它将使用 n- 必需的指令对文本输入强制执行验证。如果复选框为 true，则该字段将被隐藏，n- 需要被设置为 false。

问题是我还有一个正则表达式用于在输入上指定的验证，以及使用 ng- 模式角度指令。我遇到的问题是，如果一个用户填写了一个无效的电话号码，勾选框停用该输入(因此不需要进一步验证) ，表单将不允许提交，因为它是基于 ng 模式无效的。

我试图通过添加 ng-change 函数将输入模型设置为 null 来解决这个问题，但是 ng-pattern 和因此字段在复选框的初始设置上仍然被设置为无效，为 false。然而，如果我取消选中框，将所有内容设置回初始表单加载，然后再次选中框，表单是有效的并且能够提交。我不知道我错过了什么。下面是我到目前为止的 ng-change 代码:

    var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
$scope.phoneNumberPattern = phoneNumberRegex;
$scope.removeValidation = function() {
if ($scope.cell._newUser === false) {
$scope.request._number = '';
$scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
} else {
$scope.phoneNumberPattern = phoneNumberRegex;
}
};
207779 次浏览
小开
最佳答案

这是一个有趣的问题，复杂的角度验证。以下小提琴实现你想要的:

Http://jsfiddle.net/2g8ga/1/

细节

我创建了一个新的指令，rpattern，这是一个混合的角度的 ng-required和 input[type=text]的 ng-pattern代码。它所做的是观察字段的 required属性，并在使用 regexp 进行验证时将其考虑在内，即如果不需要将字段标记为 valid-pattern。

笔记

  • 大部分代码来自 Angular，是根据这个需要量身定制的。
  • 当选中该复选框时，该字段是必需的。
  • 当所需的复选框为 false 时，该字段不会隐藏。
  • 正则表达式为演示简化(有效数字为3位)。

如果你不想要一个新的指令，一个 肮脏(但是更小)的解决方案应该是这样的:

$scope.phoneNumberPattern = (function() {
var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
return {
test: function(value) {
if( $scope.requireTel === false ) {
return true;
}
return regexp.test(value);
}
};
})();

在 HTML 中不需要任何修改:

<input type="text" ng-model="..." ng-required="requireTel"
ng-pattern="phoneNumberPattern" />

这实际上欺骗角调用 我们的test()方法，而不是考虑 required的 RegExp.test()方法。

小开

尼科斯给出了一个令人敬畏的答案，但我们不妨这样做，也许你可以做得更简单一些:

<form name="telForm">
<input name="cb" type='checkbox' data-ng-modal='requireTel'>
<input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
<button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

注意第二个输入: 我们可以使用 ng-if来控制表单的渲染和验证。 如果没有设置 requireTel变量，那么第二个输入不仅会被隐藏，而且根本不会呈现，这样表单就会通过验证，按钮就会启用，您就会得到所需的内容。

小开

使用模式:

 ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"

使用过的参考文件:

 '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'

输入示例:

 <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
小开 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">

小开

你可以使用网站 https://regex101.com/为某些国家建立你自己的特定模式:

例如，波兰:

-pattern = xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx
-regexp ="^\d{9}|^\d{3}-\d{3}-\d{3}|^\d{3}\s\d{3}\s\d{3}"
小开

如果 ngModel $viewValue 不匹配通过计算属性值中给定的 Angular 表达式找到的 RegExp，则设置模式验证错误键。如果表达式的计算结果为 RegExp 对象，则将直接使用此表达式。如果表达式的计算结果为字符串，则在将其包装为 ^ 和 $字符后，将其转换为 RegExp。

这似乎是一个最投票的答案在这个问题应该更新，因为当我尝试它，它不适用于 test功能和验证不工作。

有角度的医生的例子对我很有用:

修改内置的验证器

Html

<form name="form" class="css-form" novalidate>
<div>
Overwritten Email:
<input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
<span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
Model: \{\{myEmail}}
</div>
</form>

JS

var app = angular.module('form-example-modify-validators', []);


app.directive('overwriteEmail', function() {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;


return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
if (ctrl && ctrl.$validators.email) {


// this will overwrite the default Angular email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
}
}
};
});

笨蛋

小开

我前几天碰到了这个。

我所做的(似乎比上面更容易)是在作用域上的一个变量上设置模式，并在视图中以 n- 模式引用它。

当“复选框未选中”时，我只需将 regex 值设置为/。*/onChanged 回调函数(如果未选中)。N- 模式选择这个更改并说“ OK，您的值是好的”。表格现在有效。我也会从字段中移除坏数据，这样你就不会有一个明显的坏电话 # 坐在那里。

我还有一些额外的问题需要解决，我做了同样的事情，非常有效。


提交答案