1

我正在使用 angularjs 在文本框上进行客户端验证，我只需要输入字母数字字符即可。如果文本框留空或输入了非字母数字字符，则提交表单会向 JS 发送所需的“false”，但问题是它本身没有传递非字母数字字符（在范围内）。

JSP 文件：

    <form name="addressForm" method="post" 
ng-submit="submitform(addressForm.$valid)" novalidate>
    ..
    <input ng-model="address" type="text" 
**ng-pattern**="/^[a-zA-Z0-9 ]*$/" required="true"/>

JS文件：

$scope.submitform= function(isValid){
var inputAddr = $scope.address;
alert(inputAddr);  //coming as undefined
...

现在，当我在 jsp 中的输入框“地址”中输入一个字母数字字符时，它在 JS 中警告它时给了我未定义的定义（可能是因为过滤字符为非字母数字的模式）。如果我删除 ng-pattern，它会通过 submitForm 传递“真”，就好像每个输入都是“预期的”。我想访问 $scope.address 的原因是检查和评估并显示“空”和“非字母数字”验证的不同错误消息。

任何帮助表示赞赏！

4

2 回答 2

6

当模型无效时，该值不会分配给模型。如果您想查看用户输入的内容，您需要检查 $viewValue：

您必须将 name 属性添加到输入，因此将输入 html 更改为：

<input ng-model="address" type="text" name="address"
ng-pattern="/^[a-zA-Z0-9 ]*$/" required="true"/>

并将您的提交功能更改为

$scope.submitform = function(isValid) {
    console.log($scope.addressForm.address.$viewValue);  
}
于 2014-04-24T08:13:47.077 回答
1

听起来您只需要知道验证错误是什么。

您可以检查$error属性FormController（addressForm在您的情况下）以查看哪些验证通过或失败。

例如，如果输入为空，则“必需”验证将失败，并且addressForm.$error.required将Array包含未通过此验证的输入。

如果“必需”验证成功，那么addressForm.$error.required将只是false.

您可以很容易地在角度表达式中使用它：

<p ng-show="addressForm.$error.required">This field is required.</p>

或者您可以通过$scope与视图关联的对象访问表单：

if ($scope.addressForm.$error.required) {
   // required validation failed
}

查看FormController和ngModelController的文档。

于 2014-04-24T08:13:51.780 回答