如何使用angular向ng指令传递两个不同的变量
How to pass in two different variables to ng directive using angular?
我试图创建一个密码验证指令,但我遇到了几个问题。这是一个jsfiddle链接
- 当我输入一个输入框时,另一个输入框自动更新,它不应该这样做
- 我不知道如何将第二个输入值传递给指令
这是我的html
<form name="sampleForm">
<input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please provide password">
<ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
<li ng-message="numberValidator">Strong secret has to contain at least 1 number</li>
<li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li>
<li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li>
</ul>
<input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please confirm password">
<ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
<li ng-message="numberValidator">Strong secret has to contain at least 1 number</li>
<li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li>
<li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li>
</ul>
</form>
这是我的js文件
angular.module('app', ['ngMessages']);
angular.module('app').directive('strongSecret', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attr, ctrl) {
function customValidator(ngModelValue, ngModelValue2) {
// only ngModelValue returns
console.log(ngModelValue);
// this is undefined
console.log(ngModelValue2);
if (/[A-Z]/.test(ngModelValue)) {
ctrl.$setValidity('uppercaseValidator', true);
} else {
ctrl.$setValidity('uppercaseValidator', false);
}
return ngModelValue;
}
ctrl.$parsers.push(customValidator);
}
};
});
当customValidator
运行时,第二个参数似乎永远不会填充。
我为第二个输入创建了一个新的验证器,但是现在我遇到了一组不同的问题(jsfiddle)
- 当我输入输入框1时,验证器不起作用
- 当我输入输入框2,两个验证器工作
我怀疑我没有在输入1和验证器1以及输入2和验证器2之间创建必要的绑定
您的两个文本输入都引用相同的模型,这就是为什么当您输入其中一个时它们都会更新。您应该尝试更改第二个的模型(和名称)属性为strongSecretConfirm或类似的东西。
您的验证器应该只在第一个字段上运行。您需要第二个验证器来验证strongSecretConfirm是否等于strongSecret。
相关文章:
- 在HTML包围的javascript中添加两个变量
- 填写表单后替换两个变量
- 用于交换两个变量的 JavaScript 函数
- 使用一个表达式将两个变量分配给相同的值
- 如何添加两个变量而不使其在javascript中连接
- 有可能让两个变量指向同一个对象吗?(javascript)
- 带有两个变量函数的Ajax提交表单
- 将两个变量的值加在一个变量中
- 如何使用javascript获取两个变量的最高值
- 如何从字符串中获取两个变量
- 测试两个变量是否包含一些数据 JavaScript
- 将两个变量从php发送到javascript
- 如何在javascript中计算两个变量的百分比
- 连接两个变量
- Javascript变量没有正确添加两个变量,只是连接
- 如何在客户端验证中验证两个变量规则
- 想要使用document.getelementbyid显示两个变量
- 使用带有两个变量的相同if-else语句
- 我可以用JavaScript声明一个数组中的两个变量吗
- 使用数据库中的两个变量在jqplot中显示图形