Как показать состояние ошибки углового входа вне формы

У меня есть требование, чтобы все сообщения об ошибках должны отображаться в заголовке приложения. Как я могу сделать это с угловой?Как показать состояние ошибки углового входа вне формы

Если у меня есть это приложение (see on plunker):

<body> 
    <div id="header"> 
     <!-- I want error messages to show up here --> 
    </div> 
    <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>

Что мне нужно, чтобы сообщения об ошибках в headerdiv. Как я могу это сделать?

источник

2016-05-20 BetaRide

Fixed demo здесь.

Просто доступ ошибка путь такой же, как в форме, как при установке <form name="myForm" >, то вы получите $ scope.myForm = [yourFormObject], а затем получить доступ к свободным в любой точке одного контроллера.

Angular Form Document

Под названием Binding для формирования и управления состоянием системы

форме, является экземпляром FormController. Экземпляр формы может быть необязательно опубликован в области с использованием атрибута name.

И даже получить доступ к $error в контроллер с помощью$scope.$watch('formName.fieldName.$error',function(nv,ov){});

// 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); 
 
});

/* Styles go here */ 
 

 
hr { 
 
    margin: 20px 0; 
 
}

<!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>

источник

2016-05-20 14:28:31

Вы будете иметь два различных контроллера заголовка controller.In, вы будете отображать свою ошибку Сообщения.

Тогда ваш контроллер будет обмениваться либо $rootScope or service

источник

2016-05-20 14:41:04

Как показать состояние ошибки углового входа вне формы

ответ

Смежные вопросы