我有使用验证的表单字段required。问题在于,呈现表单时会立即显示错误。我只希望在用户实际在文本字段中键入或提交后才显示它。
required
我该如何实施?
$dirty仅在用户与输入交互后,使用标志显示错误:
$dirty
<div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span> </div>
如果仅在用户提交表单后才想触发错误,则可以使用单独的标志变量,如下所示:
<form ng-submit="submit()" name="form" ng-controller="MyCtrl"> <div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="(form.email.$dirty || submitted) && form.email.$error.required"> Email is required </span> </div> <div> <button type="submit">Submit</button> </div> </form> function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } };
然后,如果ng-show表达式内的所有JS 看上去对您来说太多了,您可以将其抽象为一个单独的方法:
ng-show
function MyCtrl($scope){ $scope.submit = function(){ // Set the 'submitted' flag to true $scope.submitted = true; // Send the form to server // $http.post ... } $scope.hasError = function(field, validation){ if(validation){ return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]); } return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid); }; }; <form ng-submit="submit()" name="form"> <div> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="hasError('email', 'required')">required</span> </div> <div> <button type="submit">Submit</button> </div> </form>