使用AngularJS自定义表单验证$ HTTP [英] AngularJS custom form validation using $http
问题描述
我有一个看起来像这样的形式：
＆LT;形式NAME =myForm会NG提交=saveDeployment（）＆GT;
＆LT;输入类型=隐藏值={{item.CloneUrl}}NAME =cloneurl/＆GT;
＆LT;输入类型=隐藏值={{名}}NAME =用户名/＆GT; ＆LT;输入类型=电台NAME =deploymenttypeNG模型=item.deploymentTypeVALUE =蔚蓝检查=选中＆GT;天青
＆LT; BR /＆GT;
＆LT;输入类型=电台NAME =deploymenttypeNG模型=item.deploymentTypeVALUE =FTP＆GT; FTP ＆LT; DIV ID =天蓝色NG-秀=item.deploymentType =='蔚蓝'＆GT;
＆LT;标签=azurerepo＆GT; Azure中的Git回购＆LT; /标签＆gt;
＆LT;输入类型=文本名称=azurerepoNG模型=item.azurerepoNG-CLASS ={错误：myForm.azurerepo $无效}NG-所需=item.deploymentType =='蔚蓝'/＆GT;
＆LT; / DIV＆GT; ＆LT; DIV ID =FTPNG-秀=item.deploymentType =='的ftp'＆GT;
＆LT;标签=FTPServer的＆GT; FTP服务器16; /标签＆gt;
＆LT;输入类型=文本名称=FTPServer的NG模型=item.ftpserverNG-CLASS ={错误：myForm.ftpserver $无效}NG-所需=item.deploymentType =='的ftp '/＆GT; ＆LT;标签=ftppath＆GT; FTP路径和LT; /标签＆gt;
＆LT;输入类型=文本名称=ftppathNG模型=item.ftppathNG-CLASS ={错误：myForm.ftppath $无效}NG-所需=item.deploymentType =='的ftp '/＆GT; ＆LT;标签=ftpusername＆GT; FTP用户名和LT; /标签＆gt;
＆LT;输入类型=文本名称=ftpusernameNG模型=item.ftpusernameNG-CLASS ={错误：myForm.ftpusername $无效}NG-所需=item.deploymentType =='的ftp '/＆GT; ＆LT;标签=ftppassword＆GT; FTP密码＆LT; /标签＆gt;
＆LT;输入类型=密码NAME =ftppasswordNG模型=item.ftppasswordNG-CLASS ={错误：myForm.ftppassword $无效。}NG-所需=item.deploymentType =='的ftp '/＆GT;
＆LT; / DIV＆GT; ＆LT;输入类型=提交值=保存NG-禁用=myForm会$无效的。/＆GT;＆LT; /表及GT;
它的设置，使所需的字段和保存按钮一旦输入数据都在努力。然而，我的验证的一部分将是，已经注册的用户？在这里我将用输入的数据使用$ HTTP通过POST击中服务器。
我应该放在 saveDeployment（）函数的逻辑还是有一个更好的地方把它？
* 更新：的*
我已经实现了低于该应用为元素的属性，但它在每一个关键preSS我不喜欢调用服务器/数据库：
app.directive（'repoAvailable'，函数（$ HTTP，$超时）{//可用
返回{
要求：'ngModel'，
链接：功能（范围，ELEM，ATTR，CTRL）{
的console.log（CTRL）;
Ctrl键。$ parsers.push（功能（viewValue）{
//它设置为true这里，否则将无法
//清除时previous验证失败。
。CTRL $ setValidity（'repoAvailable'，真）;
如果（CTRL $有效）{
//它设置为false，在这里，因为如果我们需要检查
//电子邮件的有效性，这是无效的，直到
// AJAX响应。
CTRL $ setValidity（'checkingRepo'，虚假）。 //现在做你的事，鸡翅。
如果（viewValue ==！＆放大器;＆安培;！typeof运算viewValue ==未定义）{
$ http.post（的http：//本地主机：12008 / alreadyregistered'，viewValue）//设置为Test.json为它返回true。
.success（功能（数据，状态，头，配置）{
。CTRL $ setValidity（'repoAvailable'，真）;
CTRL $ setValidity（'checkingRepo'，真）。
}）
.error（功能（数据，状态，头，配置）{
。CTRL $ setValidity（'repoAvailable'，FALSE）;
CTRL $ setValidity（'checkingRepo'，真）。
}）;
}其他{
。CTRL $ setValidity（'repoAvailable'，FALSE）;
CTRL $ setValidity（'checkingRepo'，真）。
}
}
返回viewValue;
}）; }
};
}）;
您并不需要在指令$ HTTP请求，更好的地方是控制器。
您可以指定内部控制方法 - $ scope.saveDeployment =功能（）{//此处您和处理要求你的错误...}; 你 LL保存误差范围，然后创建基于它一个指令，将观看 $ scope.yourResponseObject 并设置有效期。
此外，如果你需要像要求和错误输入字段模糊相反，你需要创建一个 elem.bind（'模糊'，...）在这里你叫 $ scope.saveDeployment 与回调来处理有效性。
就以实例来看看，有可能是类似的东西 - 的https：/ /github.com/angular/angular.js/wiki/JsFiddle-Examples
I have a form that looks like this:
<form name="myForm" ng-submit="saveDeployment()">
<input type="hidden" value="{{item.CloneUrl}}" name="cloneurl" />
<input type="hidden" value="{{Username}}" name="username" />
<input type="radio" name="deploymenttype" ng-model="item.deploymentType" value="azure" checked="checked">Azure
<br />
<input type="radio" name="deploymenttype" ng-model="item.deploymentType" value="ftp">FTP
<div id="azure" ng-show="item.deploymentType=='azure'">
<label for="azurerepo">Azure Git Repo</label>
<input type="text" name="azurerepo" ng-model="item.azurerepo" ng-class="{error: myForm.azurerepo.$invalid}" ng-required="item.deploymentType=='azure'" />
</div>
<div id="ftp" ng-show="item.deploymentType=='ftp'">
<label for="ftpserver">FTP Server</label>
<input type="text" name="ftpserver" ng-model="item.ftpserver" ng-class="{error: myForm.ftpserver.$invalid}" ng-required="item.deploymentType=='ftp'" />
<label for="ftppath">FTP Path</label>
<input type="text" name="ftppath" ng-model="item.ftppath" ng-class="{error: myForm.ftppath.$invalid}" ng-required="item.deploymentType=='ftp'" />
<label for="ftpusername">FTP Username</label>
<input type="text" name="ftpusername" ng-model="item.ftpusername" ng-class="{error: myForm.ftpusername.$invalid}" ng-required="item.deploymentType=='ftp'"/>
<label for="ftppassword">FTP Password</label>
<input type="password" name="ftppassword" ng-model="item.ftppassword" ng-class="{error: myForm.ftppassword.$invalid}" ng-required="item.deploymentType=='ftp'"/>
</div>
<input type="submit" value="Save" ng-disabled="myForm.$invalid"/>
</form>
Its setup so that the required fields and Save button are all working once data is entered. However, part of my validation will be, "Is the user already registered?" where I will use the data entered to hit the server via POST using $http.
Should I put that logic in the saveDeployment() function or is there a better place to put it?
*UPDATE:*
I've implemented the below which is applied as an attribute on a element but it calls the server/database on every key press which I don't like:
app.directive('repoAvailable', function ($http, $timeout) { // available
return {
require: 'ngModel',
link: function (scope, elem, attr, ctrl) {
console.log(ctrl);
ctrl.$parsers.push(function (viewValue) {
// set it to true here, otherwise it will not
// clear out when previous validators fail.
ctrl.$setValidity('repoAvailable', true);
if (ctrl.$valid) {
// set it to false here, because if we need to check
// the validity of the email, it's invalid until the
// AJAX responds.
ctrl.$setValidity('checkingRepo', false);
// now do your thing, chicken wing.
if (viewValue !== "" && typeof viewValue !== "undefined") {
$http.post('http://localhost:12008/alreadyregistered',viewValue) //set to 'Test.json' for it to return true.
.success(function (data, status, headers, config) {
ctrl.$setValidity('repoAvailable', true);
ctrl.$setValidity('checkingRepo', true);
})
.error(function (data, status, headers, config) {
ctrl.$setValidity('repoAvailable', false);
ctrl.$setValidity('checkingRepo', true);
});
} else {
ctrl.$setValidity('repoAvailable', false);
ctrl.$setValidity('checkingRepo', true);
}
}
return viewValue;
});
}
};
});
You don't need to make $http request in directive, better place for it is controller.
You can specify method inside controller - $scope.saveDeployment = function () { // here you make and handle your error on request ... }; you'll save error to scope and then create a directive that will watch $scope.yourResponseObject and set validity based on it.
Also if you need something like request and error on input field blur instead, you need to create a simple directive with elem.bind('blur', ...) where you call $scope.saveDeployment with callback to handle validity.
Take a look on the examples, there might be something similar - https://github.com/angular/angular.js/wiki/JsFiddle-Examples
这篇关于使用AngularJS自定义表单验证$ HTTP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
