我最近也在玩这种东西,我敲了this demo。我认为它可以满足您的需求。
使用您要使用的任何特定客户端验证正常设置您的表单:
<div ng-controller="MyCtrl">
<form name="myForm" onsubmit="return false;">
<div>
<input type="text" placeholder="First name" name="firstName" ng-model="firstName" required="true" />
<span ng-show="myForm.firstName.$dirty && myForm.firstName.$error.required">You must enter a value here</span>
<span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>
</div>
<div>
<input type="text" placeholder="Last name" name="lastName" ng-model="lastName"/>
<span ng-show="myForm.lastName.$error.serverMessage">{{myForm.lastName.$error.serverMessage}}</span>
</div>
<button ng-click="submit()">Submit</button>
</form>
</div>
另外请注意,我为每个字段添加了serverMessage:
<span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>
这是一条从服务器返回的可自定义消息,它的工作方式与任何其他错误消息相同(据我所知)。
这里是控制器:
function MyCtrl($scope, $parse) {
var pretendThisIsOnTheServerAndCalledViaAjax = function(){
var fieldState = {firstName: 'VALID', lastName: 'VALID'};
var allowedNames = ['Bob', 'Jill', 'Murray', 'Sally'];
if (allowedNames.indexOf($scope.firstName) == -1) fieldState.firstName = 'Allowed values are: ' + allowedNames.join(',');
if ($scope.lastName == $scope.firstName) fieldState.lastName = 'Your last name must be different from your first name';
return fieldState;
};
$scope.submit = function(){
var serverResponse = pretendThisIsOnTheServerAndCalledViaAjax();
for (var fieldName in serverResponse) {
var message = serverResponse[fieldName];
var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');
if (message == 'VALID') {
$scope.myForm.$setValidity(fieldName, true, $scope.myForm);
serverMessage.assign($scope, undefined);
}
else {
$scope.myForm.$setValidity(fieldName, false, $scope.myForm);
serverMessage.assign($scope, serverResponse[fieldName]);
}
}
};
}
我假装在pretendThisIsOnTheServerAndCalledViaAjax 调用服务器,你可以用ajax 调用替换它,关键是它只是返回每个字段的验证状态。在这个简单的例子中,我使用值VALID 来指示该字段是有效的,任何其他值都被视为错误消息。您可能想要更复杂的东西!
从服务器获得验证状态后,您只需更新表单中的状态。
您可以从范围访问表单,在这种情况下,表单称为myForm,因此 $scope.myForm 会为您获取表单。 (form controller is here 的来源,如果您想了解它的工作原理)。
然后你想告诉表单该字段是否有效/无效:
$scope.myForm.$setValidity(fieldName, true, $scope.myForm);
或
$scope.myForm.$setValidity(fieldName, false, $scope.myForm);
我们还需要设置错误信息。首先使用 $parse 获取字段的访问器。然后从服务器分配值。
var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');
serverMessage.assign($scope, serverResponse[fieldName]);
希望有帮助