如何在窗體外顯示角度輸入錯誤狀態

我有要求，所有的錯誤消息都必須顯示在應用程序的標題中。我怎樣才能做到這一點？如何在窗體外顯示角度輸入錯誤狀態

如果我有這樣的應用程序（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

固定demo這裏。

剛剛訪問錯誤一樣的方式形式，當你設置<form name="myForm" >爲，那麼你將得到$ scope.myForm = [yourFormObject]，然後訪問免費的同一個控制器的任何地方。

Angular Form Document

在標題結合以形成和控制狀態

形式是的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

如何在窗體外顯示角度輸入錯誤狀態

回答

相關問題