如何在表单外部显示angular输入错误状态

14 浏览
0 Comments

如何在表单外部显示angular输入错误状态

我有一个要求，所有的错误信息都必须显示在应用程序的标题栏中。我该如何用angular实现这个要求呢？

如果我有这个应用程序（在plunker上查看）：

必填项

无效的邮箱地址

Your email address is: {{user.email}}

我需要的是将错误消息放在header的div中。我该如何做到这一点呢？

0

2 答案

0 Comments

问题：如何在表单之外显示Angular输入错误状态？

原因：你需要两个不同的控制器。在头部控制器中，你将显示错误信息。然后，你的控制器将通过$rootScope或service进行通信。

解决方法：您可以使用以下方法之一来解决此问题：

1. 使用$rootScope：您可以将错误消息存储在$rootScope中，并在头部控制器中访问和显示它们。在表单控制器中，您可以将错误消息分配给$rootScope，例如：$rootScope.errorMessage = "Invalid input";。然后，在头部控制器中，您可以使用{{$rootScope.errorMessage}}来显示错误消息。

2. 使用服务：您可以创建一个错误消息服务，该服务在表单控制器和头部控制器之间共享错误消息。在表单控制器中，您可以使用服务方法来设置错误消息，例如：ErrorMessageService.setErrorMessage("Invalid input");。然后，在头部控制器中，您可以使用服务方法来获取和显示错误消息，例如：{{$scope.errorMessage = ErrorMessageService.getErrorMessage();}}。

无论您选择哪种方法，都可以在表单之外显示Angular输入错误状态。这样，您就可以在页面的其他部分显示错误消息，而不仅仅局限于表单区域。

0
0 Comments

问题：如何在表单外部显示Angular输入错误状态？

原因：通过在控制器中访问表单对象，可以在表单外部访问输入错误的状态。在设置了<form name="myForm">之后，可以通过$scope.myForm来获取表单对象，并且可以在同一个控制器的任何地方自由访问。

解决方法：可以通过在控制器中使用$scope.$watch('formName.fieldName.$error',function(nv,ov){});来访问$error。

示例代码：

// Code goes here
var app = angular.module('plunker', ['ngMessages']);
app.controller('appCtrl', function($scope) {
  $scope.$watch('myForm.myEmail.$error', function(nv, ov) {
    console.info(nv);
  }, true);
});

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="appCtrl">
  <div id="header">
    <div ng-show="myForm.myEmail.$error.required">required</div>
    <div ng-show="myForm.myEmail.$error.email">invalid email</div>
  </div>
  <hr />
  <form name="myForm">
    <label>Email</label>
    <input name="myEmail" type="email" ng-model="user.email" required="" />
    <div ng-messages="myForm.myEmail.$error">
      <div ng-message="required">required</div>
      <div ng-message="email">invalid email</div>
    </div>
  </form>
  <p>Your email address is: {{user.email}}</p>
</body>
</html>

0